/* ============================================================
   EmreSign e-İmza — emresign.com.tr marka teması ile hizalı
   Ana renk: #004B87 (lacivert) · Font: Open Sans
   ============================================================ */
:root {
  --accent: #004B87;          /* marka lacivert */
  --accent-strong: #0B3357;   /* hover / koyu */
  --accent-soft: #e7eef5;     /* açık lacivert zemin */
  --altin: #F3C24A;           /* banner canlı altın tonu */
  --altin-parlak: #FFD76B;    /* altın (hover/aktif) */
  --titanyum-gri: #C6CBD1;    /* titanyum grisi (buton zemini) */
  --text: #212529;
  --muted: #4a5560;
  --bg: #F8F9FA;
  --kart: #ffffff;
  --cizgi: #dfe3e8;
  --yesil: #1e7d34;
  --yesil-bg: #e7f4ea;
  --sari-bg: #fff7e0;
  --kirmizi: #b3261e;
  --kirmizi-bg: #fdecea;
  --golge: 0 1px 3px rgba(11, 51, 87, .06), 0 8px 24px rgba(11, 51, 87, .05);
  --radius: 12px;
  /* STANDART kart hover'ı: fareyle üzerine gelince yumuşak pastel mavi/turkuaz zemin.
     Tüm kart/widget hover'larında bunu kullan (tek kaynak). */
  --hover-pastel: #e6f4f8;
  --hover-pastel-kenar: #bfe1ec;
  --hover-golge: 0 10px 28px rgba(11, 51, 87, .12);
}

* { box-sizing: border-box; }
html { font-size: 15px; }   /* site geneli: tüm fontlar bir punto küçültüldü (16 -> 15) */
/* E3: tüm site %90 ölçekte gösterilir — bu, YENİ %100 kabul edilir (tek kaynak). Chromium/Safari/Firefox 126+ 'zoom' destekler;
   desteklemeyen eski tarayıcıda site yalnız %100 görünür (bozulma yok). */
html { zoom: 0.9; }
body {
  margin: 0;
  font-family: "Open Sans", Arial, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Üst ince şerit ---- */
.ust-serit { background: var(--accent-strong); color: #fff; font-size: .8rem; }
.ust-serit .ic { max-width: 1200px; margin: 0 auto; padding: 6px 20px; display: flex; justify-content: space-between; gap: 12px; }
.ust-serit a { color: var(--altin); }
.ust-serit a:hover { color: var(--altin-parlak); }

/* ---- Ana başlık (beyaz, marka lacivert) ---- */
.site-baslik { background: #fff; color: var(--text); border-bottom: 1px solid var(--cizgi); box-shadow: var(--golge); }
.site-baslik .ic { max-width: 1200px; margin: 0 auto; padding: 16px 20px; display: flex; align-items: center; gap: 14px; }
.logo-kutu {
  width: 46px; height: 46px; border-radius: 10px;
  background: var(--accent);
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; flex: none;
}
.logo-yazi { display: flex; flex-direction: column; }
.logo-yazi strong { font-size: 1.3rem; letter-spacing: .01em; color: var(--accent-strong); }
.logo-yazi span { font-size: .82rem; color: var(--muted); }
.site-baslik .sag { margin-left: auto; font-size: .85rem; color: var(--muted); }

/* ---- Menü (lacivert şerit) ---- */
.ana-menu { background: var(--accent); }
/* İki grup: sol (ana menü) + sağ (kullanıcı/yönetici). Tek satırda sola/sağa yaslı; sığmazsa sağ grup
   alt satıra iner ve SOLA yaslanır (eski margin-left:auto ile oluşan sağda-boşluk hizasızlığı giderildi). */
.ana-menu .ic { max-width: 1200px; margin: 0 auto; padding: 0 12px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; }
.menu-sol { display: flex; flex-wrap: wrap; }
.ana-menu a { color: var(--altin); padding: 12px 16px; font-size: .92rem; font-weight: 600; border-bottom: 3px solid transparent; }
.ana-menu a:hover { background: rgba(255,255,255,.10); color: var(--altin-parlak); text-decoration: none; }
.ana-menu a.aktif { border-bottom-color: var(--altin); background: rgba(255,255,255,.08); color: var(--altin-parlak); }
/* Yönetici/kullanıcı bağlantıları sekmelerden ince bir çizgiyle ayrılır. */
.menu-sag { display: flex; flex-wrap: wrap; align-items: stretch; border-left: 1px solid rgba(255,255,255,.16); }
.menu-sag > a { padding-left: 13px; padding-right: 13px; }

/* ---- İçerik ---- */
.icerik { flex: 1 0 auto; max-width: 1200px; width: 100%; margin: 0 auto; padding: 24px 20px 48px; }
.izlek { font-size: .84rem; color: var(--muted); margin-bottom: 16px; }
.izlek a { color: var(--muted); }
h1.sayfa, h2.sayfa { font-size: 1.65rem; margin: 0 0 4px; color: var(--accent-strong); font-weight: 700; }
.sayfa-aciklama { color: var(--muted); margin: 0 0 22px; }

/* ---- Hizmet kartları ---- */
.izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-auto-rows: 1fr; gap: 18px; }
.hizmet {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--golge); display: flex; flex-direction: column; gap: 8px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease; color: inherit;
}
.hizmet:hover { transform: translateY(-3px); box-shadow: var(--hover-golge); text-decoration: none; background: var(--hover-pastel); border-color: var(--hover-pastel-kenar); }
.hizmet .ikon {
  width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: 1.4rem; font-weight: 700;
}
.hizmet.dogrula .ikon { background: var(--yesil-bg); color: var(--yesil); }
.hizmet h3 { margin: 8px 0 0; font-size: 1.08rem; color: var(--accent-strong); }
.hizmet p { margin: 0; color: var(--muted); font-size: .9rem; }
.hizmet .git { margin-top: auto; color: var(--accent); font-size: .88rem; font-weight: 700; }

/* ---- Panel / form ---- */
.panel { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--radius); box-shadow: var(--golge); padding: 24px; max-width: none; }
.panel + .panel { margin-top: 18px; }
.alan { margin-bottom: 16px; }
.alan label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .92rem; }
.alan .yardim { color: var(--muted); font-size: .82rem; margin-top: 4px; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=file],
input[type=tel], input[type=search], input[type=url], input[type=date], input[type=datetime-local],
input[type=month], input[type=time], input:not([type]), select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--cizgi); border-radius: 8px; font-size: .95rem; background: #fff; font-family: inherit;
  box-sizing: border-box; line-height: 1.35; height: 42px;
}
input[type=file]{ height:auto; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
/* Salt-okunur/pasif alanlar aynı ölçüde, yalnız donuk zeminli */
input:disabled, input[readonly] { background: #f4f6f9; color: #55657a; }
.satir { display: flex; gap: 14px; flex-wrap: wrap; }
.satir > .alan { flex: 1 1 200px; }
/* Alta hizalı form satırları (kutular + düğme yan yana): .alan'ın alt boşluğu düğmeyi kutulardan aşağı iterdi; sıfırlanır, düğme kutularla aynı yükseklikte olur. */
[style*="align-items:end"] > .alan, [style*="align-items:flex-end"] > .alan { margin-bottom: 0; }
[style*="align-items:end"] > .btn, [style*="align-items:flex-end"] > .btn,
[style*="align-items:end"] > button, [style*="align-items:flex-end"] > button { height: 42px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }

.btn { display: inline-flex; align-items: center; gap: 8px; border: none; border-radius: 8px; padding: 11px 22px; font-size: .95rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.btn-birincil { background: var(--accent); color: #fff; }
.btn-birincil:hover { background: var(--accent-strong); color: #fff; text-decoration: none; }
.btn-ikincil { background: #fff; color: var(--accent-strong); border: 1px solid var(--accent); }
.btn-ikincil:hover { background: var(--accent-soft); text-decoration: none; }

/* ---- Uyarı kutuları ---- */
.kutu { border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; font-size: .92rem; border: 1px solid transparent; }
.kutu-bilgi { background: var(--accent-soft); border-color: #c7d8e8; color: var(--accent-strong); }
.kutu-uyari { background: var(--sari-bg); border-color: #f2d98a; color: #6b4e00; }
.kutu-basari { background: var(--yesil-bg); border-color: #b7e0c0; color: #14532d; }
.kutu-hata { background: var(--kirmizi-bg); border-color: #f3b6b1; color: #7a1a12; }

/* ---- Rozet / durum ---- */
.rozet { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.rozet-gecerli { background: var(--yesil-bg); color: var(--yesil); }
.rozet-gecersiz { background: var(--kirmizi-bg); color: var(--kirmizi); }
.rozet-uyarili { background: var(--sari-bg); color: #8a6d00; }

/* ---- Sonuç tablosu ---- */
.imza-kart { border: 1px solid var(--cizgi); border-radius: var(--radius); overflow: hidden; margin-top: 16px; }
.imza-kart .ust { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--accent-soft); border-bottom: 1px solid var(--cizgi); }
.imza-kart .ust strong { font-size: .98rem; color: var(--accent-strong); }
table.ozet { width: 100%; border-collapse: collapse; }
table.ozet th, table.ozet td { text-align: left; padding: 9px 16px; border-bottom: 1px solid #eef1f4; font-size: .9rem; vertical-align: top; }
table.ozet th { color: var(--muted); font-weight: 600; width: 40%; }
/* Veri tabloları: başlıklar veriyle aynı hizada (sola); sayısal sütunlar inline text-align:right ile sağa yaslanır. */
table.tablo { width: 100%; border-collapse: collapse; }
table.tablo th, table.tablo td { text-align: left; padding: 9px 12px; border-bottom: 1px solid #eef1f4; vertical-align: middle; }
table.tablo th { color: var(--muted); font-weight: 600; }
/* Tıklanabilir satır (örn. Sorgula sonuç listesi) — kart/widget hover standardıyla AYNI kaynak:
   yumuşak pastel zemin, alt-çizgi YOK. Satır bazında yükselme/gölge UYGULANMAZ (yoğun tablo
   düzeninde görsel gürültü yaratır) — bkz. proje hover standardı (site.css :root). */
table.tablo tbody tr.satir-link { cursor: pointer; }
table.tablo tbody tr.satir-link:hover td { background: var(--hover-pastel); }
.hata-list { margin: 6px 0 0; padding-left: 18px; color: var(--kirmizi); font-size: .88rem; }
.uyari-list { margin: 6px 0 0; padding-left: 18px; color: #8a6d00; font-size: .88rem; }

/* ---- Alt bilgi ---- */
.site-alt { flex-shrink: 0; background: var(--accent-strong); color: #cdd9e6; font-size: .85rem; }
.site-alt .ic { max-width: 1200px; margin: 0 auto; padding: 22px 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.site-alt a { color: var(--altin); }
.site-alt a:hover { color: var(--altin-parlak); }
.footer-ust { max-width: 1200px; margin: 0 auto; padding: 34px 20px 22px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 28px; }
.footer-marka strong { display: block; color: #fff; font-size: 1.05rem; margin-bottom: 8px; }
.footer-marka p { margin: 0; color: #b9c7d6; max-width: 42ch; }
.footer-kol h4 { margin: 0 0 12px; color: #fff; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.footer-kol a { display: block; margin: 7px 0; }
.footer-kol p { margin: 7px 0; color: #b9c7d6; }
.site-alt .ic { border-top: 1px solid rgba(255,255,255,.12); }
@media (max-width: 760px) { .footer-ust { grid-template-columns: 1fr 1fr; gap: 22px; } }
@media (max-width: 440px) { .footer-ust { grid-template-columns: 1fr; } }

/* ============================================================
   Giriş / Kullanıcı İşlemleri sayfası (taslak)
   ============================================================ */
.giris-sarmal { display: flex; justify-content: center; padding: 8px 0 32px; }
.giris-kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 16px; box-shadow: 0 20px 60px rgba(11,51,87,.15); width: min(940px, 100%); overflow: hidden; }
.giris-baslik { display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px; background: #fbf3ea; border-bottom: 1px solid var(--cizgi); }
.giris-ikon { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); display: grid; place-items: center; font-size: 1.35rem; flex: none; }
.giris-baslik-yazi h1 { margin: 0; font-size: 1.3rem; color: var(--accent-strong); }
.giris-baslik-yazi p { margin: 3px 0 0; color: var(--muted); font-size: .9rem; }
.giris-kapat { margin-left: auto; color: var(--muted); font-size: 1.7rem; line-height: 1; text-decoration: none; }
.giris-kapat:hover { color: var(--accent-strong); text-decoration: none; }
.giris-govde { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 26px 28px 30px; }
.giris-sol h2, .giris-sag h2 { margin: 0 0 16px; font-size: 1.15rem; color: var(--accent-strong); }
.giris-btn { width: 100%; justify-content: center; margin-top: 4px; }
.giris-unut { display: inline-block; margin-top: 12px; font-size: .9rem; }
.giris-sag { background: var(--accent-soft); border: 1px solid #d7e2ee; border-radius: 12px; padding: 22px; }
.giris-sag p { color: var(--muted); margin: 0 0 14px; }
.giris-ozellik { list-style: none; margin: 0 0 18px; padding: 0; }
.giris-ozellik li { position: relative; padding-left: 24px; margin: 9px 0; color: var(--metin); font-size: .92rem; }
.giris-ozellik li::before { content: "✓"; position: absolute; left: 0; color: var(--yesil); font-weight: 700; }
.giris-kayit { width: 100%; justify-content: center; }
@media (max-width: 680px) { .giris-govde { grid-template-columns: 1fr; } }

/* ============================================================
   Hero banner (emresign.com.tr landing-hero-pro esinli, canlı)
   ============================================================ */
.hero {
  position: relative;
  display: grid;                 /* slaytlar aynı hücrede yığılır → yükseklik içeriğe göre */
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #cfd4da;
  box-shadow: 0 10px 30px rgba(11, 51, 87, .12);
  margin-bottom: 26px;
  background: #e6e9ed;           /* titanyum açık gri / gümüş — düz renk, gradyan yok */
}
.hero-slide {
  grid-area: 1 / 1;              /* tüm slaytlar üst üste; kap en uzun slayta göre büyür */
  display: flex; align-items: center; gap: clamp(12px, 2vw, 26px);
  padding: clamp(24px, 3.5vw, 46px);
  padding-left: clamp(64px, 6vw, 92px);     /* sol ok metinle çakışmasın */
  padding-bottom: clamp(52px, 6vw, 68px);   /* nokta/sayaç için pay */
  color: var(--accent-strong);
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease;
}
.hero-slide.aktif { opacity: 1; visibility: visible; }
.hero-metin { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pro-slide-tag {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0, 75, 135, .10); border: 1px solid rgba(0, 75, 135, .28);
  color: var(--accent-strong); padding: 6px 14px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.hero-slide h2 {
  margin: 4px 0 0; max-width: 22ch;
  font-size: clamp(1.35rem, 2.6vw, 2.25rem); line-height: 1.1; font-weight: 700;
  color: var(--accent-strong);
}
.hero-slide p { margin: 0; max-width: 56ch; color: #44515f; font-size: clamp(.88rem, 1.15vw, .98rem); }
.hero-aksiyon { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hero-aksiyon .btn { border-radius: 999px; }
.hero-gorsel { flex: 0 0 39%; align-self: stretch; display: flex; min-height: 220px; margin-right: 40px; }
.hero-gorsel img {
  width: 100%; height: 100%; min-height: 220px;
  object-fit: cover; object-position: right center;
  border-radius: 16px;
  /* Kenarları banner zeminine yumuşak geçişle eritir (feather) */
  -webkit-mask-image: radial-gradient(135% 125% at 80% 50%, #000 50%, rgba(0,0,0,.4) 76%, transparent 100%);
          mask-image: radial-gradient(135% 125% at 80% 50%, #000 50%, rgba(0,0,0,.4) 76%, transparent 100%);
}
.hero-sayac { position: absolute; right: clamp(18px,3vw,30px); bottom: clamp(14px,2vw,22px); z-index: 2; color: rgba(11,51,87,.65); font-weight: 700; letter-spacing: .1em; font-size: .85rem; }
.hero-noktalar { position: absolute; left: clamp(64px,6vw,92px); bottom: clamp(14px,2vw,20px); z-index: 2; display: flex; gap: 8px; }
.hero-nokta { position: relative; width: 9px; height: 9px; border-radius: 999px; background: rgba(11,51,87,.28); border: none; cursor: pointer; padding: 0; transition: width .2s, background .2s; }
/* Dokunma hedefi ~44px (görsel nokta küçük kalır; erişilebilirlik için tıklama alanı büyütülür). */
.hero-nokta::after { content: ""; position: absolute; inset: -17px; }
.hero-nokta.aktif { width: 26px; background: var(--accent); }
.hero-ok { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 42px; height: 42px; border-radius: 999px;
  background: rgba(11,51,87,.06); border: 1px solid rgba(11,51,87,.24); color: var(--accent-strong); font-size: 1.3rem; cursor: pointer;
  display: grid; place-items: center; opacity: 0; transition: opacity .2s, background .2s; }
.hero:hover .hero-ok { opacity: 1; }
.hero-ok:hover { background: rgba(11,51,87,.14); }
.hero-ok.onceki { left: 14px; }
.hero-ok.sonraki { right: 14px; }

@media (max-width: 860px) { .hero-gorsel { display: none; } }
@media (max-width: 640px) {
  /* Header: logo + sağ blok dar ekranda ALT SATIRA sarsın (gizleme yok → kullanıcı kredi/ajan durumunu görsün).
     Yatay taşma yerine satır kırma. */
  .site-baslik .ic { flex-wrap: wrap; }
  .site-baslik .sag { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  .sag-rozetler { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
  .ia-badge, .kredi-badge { padding: 4px 10px; font-size: .78rem; max-width: 100%; }
  .satir { flex-direction: column; }
  .satir > .alan { flex: 0 0 auto; }   /* sütunda 200px taban değeri yükseklik olmasın */
  .hero-ok { display: none; }
  /* Geniş tablolar dar ekranda YATAY KAYDIRILABİLİR olsun (kırpma yok): kendi sarmalayıcısı olmayanlar
     kendi içinde kaysın. .tablo zaten çoğu yerde .overflow sarmalı; burada emniyet için block+scroll. */
  .tablo { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
}

/* ---- Menü kullanıcı adı (nav ile aynı hiza/renk) ---- */
.menu-kullanici{display:inline-flex;align-items:center;padding:12px 16px;
  color:var(--altin);font-weight:600;font-size:.92rem;line-height:1;}

/* ---- İmza Aracı durum rozeti (üst başlıkta, açık zemin) ---- */
.ia-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  font-size:.82rem;font-weight:600;line-height:1;white-space:nowrap;
  background:var(--accent-soft);color:var(--accent-strong);border:1px solid var(--cizgi);}
.ia-badge .ia-nokta{width:8px;height:8px;border-radius:50%;background:#c9c9c9;flex:0 0 auto;}
.ia-badge.ia-on .ia-nokta{background:#2e9b54;box-shadow:0 0 0 3px rgba(46,155,84,.18);}
.ia-badge.ia-off .ia-nokta{background:#d33;box-shadow:0 0 0 3px rgba(221,51,51,.18);}
.ia-badge.ia-checking .ia-nokta{background:#e0b400;}
.ia-badge.ia-on{background:#e8f5ec;color:#1B5E20;border-color:#bfe0c8;}
/* Bağlı değil: yazı bayrak kırmızısı + mini "İndir" butonu */
.ia-badge.ia-off{background:#fdecec;color:#E30A17;border-color:#f2c7c7;}
.ia-badge .ia-link{margin-left:3px;background:#E30A17;color:#fff;text-decoration:none;
  font-weight:700;font-size:.72rem;padding:2px 9px;border-radius:6px;line-height:1.5;}
.ia-badge .ia-link:hover{background:#c40813;color:#fff;text-decoration:none;}

/* ---- Ana sayfa hizmet kartı görsel ikonları ---- */
.ikon.ikon-img, .hizmet.dogrula .ikon.ikon-img{background:transparent;width:76px;height:76px;padding:0;border-radius:0;}
.ikon.ikon-img img{width:100%;height:100%;object-fit:contain;display:block;}

/* ---- Yönetim widget ikonları: EmreSign lacivert/altın rozet dili ---- */
.hizmet .ikon.ikon-yonetim{
  position:relative;width:72px;height:72px;border-radius:20px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(145deg,#061b31 0,#0b3458 58%,#071d34 100%);
  border:2px solid rgba(242,189,66,.92);
  color:#ffda72;display:grid;place-items:center;overflow:visible;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 11px 24px rgba(11,51,87,.18),0 0 18px rgba(242,189,66,.24);
}
.hizmet .ikon.ikon-yonetim::before{
  content:"";position:absolute;inset:6px;border-radius:16px;
  border:1px solid rgba(255,255,255,.12);pointer-events:none;
}
.hizmet .ikon.ikon-yonetim::after{
  content:"✓";position:absolute;right:-7px;bottom:-7px;width:27px;height:27px;border-radius:999px;
  display:grid;place-items:center;background:linear-gradient(145deg,#ffe8a1 0,#d79a25 100%);
  color:#082a47;border:2px solid #fff6d8;font-size:17px;font-weight:900;line-height:1;
  box-shadow:0 5px 13px rgba(11,51,87,.28),0 0 13px rgba(242,189,66,.40);
}
.hizmet .ikon.ikon-yonetim svg{
  width:34px;height:34px;stroke:currentColor;filter:drop-shadow(0 2px 4px rgba(0,0,0,.36));
}

/* ---- Header marka logosu (kalkan-e görseli) ---- */
.logo-mark{height:52px;width:auto;display:block;flex:0 0 auto;}

/* ---- Pasif (giriş yapılmadığında işlem linkleri: görünür ama soluk) ---- */
.pasif{opacity:.5;filter:grayscale(55%);}
.pasif:hover{opacity:.72;}
.ana-menu a.pasif{color:#aab9c9;}
.ana-menu a.pasif:hover{background:rgba(255,255,255,.05);color:#c3d1df;}
.hizmet.pasif{box-shadow:none;}
.hizmet.pasif:hover{transform:none;box-shadow:var(--golge);background:var(--kart);border-color:var(--cizgi);}

/* ---- Yönetici widget kartları (izole yönlendirme, yalnız Yonetici) ---- */
.ikon.ikon-svg{
  position:relative;width:72px;height:72px;padding:0;border-radius:20px;display:grid;place-items:center;overflow:visible;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(145deg,#061b31 0,#0b3458 58%,#071d34 100%);
  border:2px solid rgba(242,189,66,.92);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 11px 24px rgba(11,51,87,.18),0 0 18px rgba(242,189,66,.24);
}
.ikon.ikon-svg::before{
  content:"";position:absolute;inset:6px;border-radius:16px;border:1px solid rgba(255,255,255,.12);pointer-events:none;
}
.ikon.ikon-svg::after{
  content:"✓";position:absolute;right:-7px;bottom:-7px;width:27px;height:27px;border-radius:999px;
  display:grid;place-items:center;background:linear-gradient(145deg,#ffe8a1 0,#d79a25 100%);
  color:#082a47;border:2px solid #fff6d8;font-size:17px;font-weight:900;line-height:1;
  box-shadow:0 5px 13px rgba(11,51,87,.28),0 0 13px rgba(242,189,66,.40);
}
.ikon.ikon-svg svg{width:38px;height:38px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.36));}
.hizmet.yonetim{position:relative;border-color:#ead9a6;background:linear-gradient(180deg,#fffdf6 0,#ffffff 60%);}
.yonetici-etiket{position:absolute;top:12px;right:12px;background:var(--altin);color:#5a4300;
  font-size:.64rem;font-weight:800;padding:2px 9px;border-radius:999px;letter-spacing:.02em;text-transform:uppercase;}

/* ---- Giriş/Kayıt başlığındaki marka yazısı + logo ---- */
.giris-marka{margin-left:auto;align-self:center;font-weight:700;color:var(--accent-strong);font-size:1.1rem;white-space:nowrap;letter-spacing:.01em;}
.giris-logo{height:56px;width:auto;align-self:center;flex:none;margin-left:4px;}
.giris-logo + .giris-kapat{margin-left:18px;}

/* ---- Yönetim panosu çizgi ikonları ---- */
.ikon svg{width:26px;height:26px;}
/* Nav öğe sayısı arttı (Eser Sahiplenme) — sığması için hafif küçültme */
.ana-menu a{font-size:.85rem;padding:12px 13px;}

/* ---- Kart sarmalı + sağ-alt Yardım mini linki ---- */
.hizmet-kutu{position:relative;display:flex;}
.hizmet-kutu > .hizmet{flex:1;}
.kart-yardim{position:absolute;right:18px;bottom:18px;z-index:2;font-size:.8rem;font-weight:700;
  color:var(--muted);display:inline-flex;align-items:center;gap:4px;text-decoration:none;
  padding:3px 9px;border-radius:7px;border:1px solid var(--cizgi);background:#fff;}
.kart-yardim:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);text-decoration:none;}

/* Hiyerarşik imzacı roster tablosu (CAdES) */
.roster-tablo{width:100%;border-collapse:collapse;font-size:.9rem;}
.roster-tablo th{text-align:left;padding:4px 6px;color:var(--muted);font-weight:600;
  border-bottom:1px solid var(--cizgi);white-space:nowrap;font-size:.82rem;}
.roster-tablo td{padding:4px 6px;vertical-align:middle;}
.roster-tablo td:first-child{color:var(--muted);text-align:center;}
.roster-tablo input{width:100%;box-sizing:border-box;padding:6px 8px;
  border:1px solid var(--cizgi);border-radius:7px;font-size:.9rem;}
.roster-tablo .r-sil{padding:2px 9px;line-height:1.2;}

/* Kredi onay modalı (Bootstrap'sız overlay) */
.kredi-overlay{position:fixed;inset:0;background:rgba(12,30,55,.45);display:none;
  align-items:center;justify-content:center;z-index:1000;padding:16px;}
.kredi-modal{background:#fff;border-radius:12px;max-width:440px;width:100%;
  padding:22px 24px;box-shadow:0 18px 48px rgba(0,0,0,.25);}
.kredi-tablo{width:100%;border-collapse:collapse;font-size:.94rem;}
.kredi-tablo th{text-align:left;color:var(--muted,#5b6b7f);font-weight:600;
  padding:6px 8px;white-space:nowrap;width:42%;}
.kredi-tablo td{padding:6px 8px;text-align:right;font-variant-numeric:tabular-nums;}

/* Header: giriş yapılınca rozet avatarı + kredi rozeti */
.site-baslik .sag{display:flex;align-items:center;gap:12px;}
.hesap-avatar{flex:0 0 auto;width:78px;height:78px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:#eef3f8;border:2px solid var(--cizgi);
  color:#8aa0b8;text-decoration:none;}
.hesap-avatar img{width:100%;height:100%;object-fit:cover;background:#fff;}
.hesap-avatar svg{width:28px;height:28px;}
.sag-rozetler{display:flex;flex-direction:column;gap:6px;align-items:flex-end;}
.kredi-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  font-size:.85rem;font-weight:600;border:1px solid #bfe0c8;background:#e8f5ec;color:#1B5E20;text-decoration:none;}
.kredi-badge .ia-nokta{width:8px;height:8px;border-radius:50%;background:#2e9b54;
  box-shadow:0 0 0 3px rgba(46,155,84,.18);flex:0 0 auto;}
.hesap-sec{display:inline-block;margin:0;}
.hesap-sec select{appearance:auto;max-width:300px;padding:4px 28px 4px 12px;border-radius:999px;border:0.5px solid #b9d4bf;background:#e8f5ec;color:#1B5E20;font-size:.8rem;font-weight:600;text-overflow:ellipsis;cursor:pointer;}
.hesap-sec select.kurum-aktif{background:#e6f1fb;border-color:#85b7eb;color:#0c447c;}
.hesap-sec select:focus-visible{outline:2px solid #378add;outline-offset:2px;}
@media (max-width:640px){.hesap-sec select{max-width:210px;font-size:.74rem;padding:3px 22px 3px 10px;}}
.kurum-rozet-metin{display:inline-flex;flex-direction:column;line-height:1.2;}
.kurum-rozet-metin small{font-size:.72rem;font-weight:400;opacity:.9;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kredi-badge:hover{background:#dcefe2;color:#1B5E20;text-decoration:none;}

/* Header mini "Rozet Seç" butonu (rozet yoksa) */
.rozet-mini-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;padding:5px 10px;
  border-radius:999px;font-size:.78rem;font-weight:600;cursor:pointer;text-decoration:none;
  background:#fff;color:var(--accent);border:1px dashed var(--accent);}
.rozet-mini-btn:hover{background:var(--accent-soft,#eef4fb);color:var(--accent-strong);text-decoration:none;}
.rozet-mini-btn:disabled{opacity:.6;cursor:default;}

/* Profil sayfası — iki kolon (sol formlar, sağ rozet) */
.profil-duzen{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;}
.profil-sol{flex:1 1 560px;min-width:0;}
.profil-sag{flex:0 0 300px;}
.profil-sag .panel{margin-top:0;}
.rozet-panel{text-align:center;}
.rozet-onizle-kutu{width:150px;height:150px;margin:6px auto 14px;border:1px solid var(--cizgi);
  border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.rozet-onizle-kutu img{max-width:100%;max-height:100%;object-fit:contain;}
.rozet-durum-yok{color:var(--muted);font-size:.9rem;text-align:center;line-height:1.35;}
.rozet-btnler{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
@media (max-width:820px){ .profil-sag{flex:1 1 100%;} }

/* Profil kredi özeti + paketler */
.kredi-ozet{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:#f4f8fc;border:1px solid var(--cizgi);border-radius:12px;padding:14px 18px;}
.kredi-bakiye{display:flex;align-items:baseline;gap:8px;}
.kredi-bakiye-etiket{color:var(--muted);font-size:.9rem;}
.kredi-bakiye-deger{font-size:1.8rem;font-weight:700;color:var(--accent-strong);font-variant-numeric:tabular-nums;}
.kredi-bakiye-birim{color:var(--muted);}
.paketler{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0;}
.paket{flex:1 1 120px;border:1px solid var(--cizgi);border-radius:10px;padding:12px;text-align:center;background:#fff;}
.paket-ad{display:block;font-weight:600;color:var(--accent-strong);}
.paket-kredi{display:block;color:var(--muted);font-size:.9rem;margin-top:2px;}

/* Panel genişletme modifikatörü — sayfa enini kullanır (dar 760 hissi vermesin) */
.panel.genis { max-width: 100%; }
.kutu.genis { max-width: 100%; }

/* Hukuki/kurumsal metin sayfaları */
.hukuk-metin h3{font-size:1.02rem;color:var(--accent-strong);margin:18px 0 6px;}
.hukuk-metin p, .hukuk-metin li{color:var(--text);font-size:.95rem;line-height:1.7;}
.hukuk-metin ul{margin:6px 0;padding-left:20px;}


/* ================= EmreSign DURUM SAYFALARI (Hata/404/Bakım) — markalı, tek dil ================= */
.durum-sar { display: flex; justify-content: center; padding: 6vh 16px; }
.durum-kart { max-width: 560px; width: 100%; background: #fff; border: 1px solid #e3e7ec;
  border-radius: 18px; overflow: hidden; box-shadow: 0 18px 50px rgba(12,58,107,.12); }
.durum-bant { background: linear-gradient(135deg,#0B3357 0%,#004B87 100%); color: #fff;
  padding: 20px 26px; display: flex; align-items: center; gap: 13px; border-bottom: 3px solid var(--altin, #F3C24A); }
.durum-bant img { height: 40px; }
.durum-bant .yz { display: flex; flex-direction: column; line-height: 1.15; }
.durum-bant .yz b { font-size: 1.15rem; letter-spacing: .01em; }
.durum-bant .yz span { font-size: .78rem; opacity: .85; }
.durum-govde { padding: 30px 34px 26px; text-align: center; }
.durum-amblem { width: 96px; height: 96px; margin: 0 auto 8px; display: block; }
.durum-kod { font-size: 44px; font-weight: 800; line-height: 1; color: var(--accent, #1769b5);
  letter-spacing: .02em; margin: 2px 0 6px; }
.durum-rozet { display: inline-block; padding: 5px 15px; border-radius: 999px; font-size: 12.5px;
  font-weight: 700; letter-spacing: .3px; background: #fff5e6; color: #b7791f; margin-bottom: 12px; }
.durum-baslik { font-size: 22px; margin: 4px 0 12px; color: var(--accent-strong, #12233f); }
.durum-mesaj { font-size: 15px; line-height: 1.75; color: #4a5561; margin: 0 auto 14px; max-width: 40ch; }
.durum-mesaj strong { color: #12233f; }
.durum-vurgu { background: #e7f6ec; color: #1a7f3c; border-radius: 12px; padding: 12px 16px; font-size: 14px; margin: 4px 0 4px; }
.durum-aksiyon { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; margin: 20px 0 4px; }
.durum-iletisim { margin-top: 22px; padding-top: 16px; border-top: 1px solid #eceff3;
  font-size: 13.5px; line-height: 1.8; color: #6b7684; }
.durum-iletisim .firma { display: block; font-weight: 700; color: #12233f; }
.durum-iletisim a { color: #1f6feb; text-decoration: none; }
.durum-amblem .cizgi { stroke: #004B87; } .durum-amblem .dolgu { fill: #e7eef5; }
.durum-amblem.uyari .cizgi { stroke: #b7791f; } .durum-amblem.uyari .dolgu { fill: #fff5e6; }
@media (prefers-color-scheme: dark) {
  .durum-kart { background: #161d2b; border-color: #26303f; }
  .durum-govde .durum-baslik { color: #e6ebf2; } .durum-mesaj { color: #aeb8c4; } .durum-mesaj strong { color: #e6ebf2; }
  .durum-iletisim { border-color: #26303f; color: #94a0b0; } .durum-iletisim .firma { color: #e6ebf2; }
  .durum-vurgu { background: rgba(26,127,60,.18); color: #7fe0a0; }
  .durum-amblem .dolgu { fill: rgba(23,105,181,.18); }
  .durum-amblem.uyari .dolgu { fill: rgba(183,121,31,.18); }
}

/* E4: Yukarı çık oku — banner okları (.hero-ok) ile aynı görsel dil: yuvarlak, yarı saydam, lacivert çerçeve. */
.ust-ok { position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(255,255,255,.92); border: 1px solid rgba(11,51,87,.30); color: var(--accent-strong); font-size: 1.3rem; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(11,51,87,.18); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, background .2s, visibility .2s; }
.ust-ok.gorunur { opacity: 1; visibility: visible; transform: none; }
.ust-ok:hover { background: var(--hover-pastel); border-color: var(--hover-pastel-kenar); }
.ust-ok:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media print { .ust-ok { display: none; } }

/* G6-b: hiyerarsik surec - tamamlanmis belge indirme modali */
.takip-modal { position: fixed; inset: 0; z-index: 1500; background: rgba(11,51,87,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.takip-modal[hidden] { display: none; }
.takip-modal-kutu { background: var(--kart); border-radius: var(--radius); box-shadow: var(--golge); padding: 20px; width: min(560px, 100%); max-height: 90vh; overflow: auto; }

/* G9: Destek Merkezi — kart seçimli dinamik form + yazışma */
.destek-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 10px 0 18px; }
.destek-kart { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 12px; border: 1px solid var(--cizgi); border-radius: var(--radius); background: var(--kart); cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
.destek-kart:hover { background: var(--hover-pastel); border-color: var(--hover-pastel-kenar); box-shadow: var(--hover-golge); }
.destek-kart input { position: absolute; opacity: 0; pointer-events: none; }
.destek-kart .simge { font-size: 1.5rem; line-height: 1; }
.destek-kart.secili, .destek-kart:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px rgba(0,75,135,.18); }
.destek-kart:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.destek-dinamik { border: 1px dashed var(--cizgi); border-radius: var(--radius); padding: 10px 14px 4px; margin: 0 0 14px; }
.destek-dinamik legend { padding: 0 6px; font-weight: 600; color: var(--accent-strong); font-size: .9rem; }
.destek-tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.destek-metin { white-space: pre-wrap; word-break: break-word; }
.destek-alt { font-size: .95rem; margin: 12px 0 4px; color: var(--accent-strong); }
.destek-mesaj { border-radius: var(--radius); padding: 10px 14px; margin: 10px 0; border: 1px solid var(--cizgi); }
.destek-mesaj .ust { font-size: .82rem; color: var(--muted); margin-bottom: 4px; }
.destek-mesaj.yonetici { background: var(--accent-soft); border-color: #c9d9e8; }
.destek-mesaj.kullanici { background: var(--kart); }
.destek-mesaj.dahili { background: var(--sari-bg); border-color: #f2d98a; }

/* E1: tahsilat linki — tek seçimli taksit listesi */
.taksit-secim { border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 8px 12px 10px; margin: 0 0 12px; }
.taksit-secim legend { font-weight: 600; color: var(--accent-strong); padding: 0 6px; }
.taksit-satir { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; padding: 8px 6px; border-radius: 8px; cursor: pointer; }
.taksit-satir:hover { background: var(--hover-pastel); }
.taksit-satir:has(input:checked) { background: var(--accent-soft); }
.taksit-satir .ad { font-weight: 600; }
.taksit-satir .tutar { text-align: right; font-variant-numeric: tabular-nums; }
.taksit-satir .vade { grid-column: 2 / 4; text-align: right; font-size: .8rem; color: var(--muted); }

/* E2: banner "Kredi Satın Al" düğmesi — marka altını, banner okları/butonlarıyla uyumlu */
.hero-aksiyon .btn-kredi { background: var(--altin); border: 1px solid #d9a52a; color: #0B3357; font-weight: 700; }
.hero-aksiyon .btn-kredi:hover { background: var(--altin-parlak); color: #0B3357; }

/* E6: yasal erişim uyarısı (logo + metin + kabul/ret) */
.uyari-katman { position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(11,51,87,.82); backdrop-filter: blur(3px); }
.uyari-katman.ret { background: #0B3357; }
.uyari-kutu { background: var(--kart); border-radius: 16px; max-width: 640px; width: 100%; max-height: 92vh; overflow: auto; padding: 24px 26px; box-shadow: 0 24px 70px rgba(0,0,0,.35); border-top: 4px solid var(--altin); }
.uyari-logo { height: 46px; width: auto; display: block; margin: 0 0 10px; }
.uyari-kutu h2 { margin: 0 0 10px; font-size: 1.25rem; color: var(--accent-strong); }
.uyari-metin { white-space: pre-wrap; word-break: break-word; font-size: .93rem; line-height: 1.6; max-height: 46vh; overflow: auto; padding: 10px 12px; background: var(--bg); border: 1px solid var(--cizgi); border-radius: 10px; }
.uyari-ret { color: var(--kirmizi); background: var(--kirmizi-bg); border-radius: 8px; padding: 8px 12px; margin: 10px 0 0; font-size: .9rem; }
.uyari-ret[hidden] { display: none; }
.uyari-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 8px; }
.uyari-alt { font-size: .78rem; color: var(--muted); margin: 6px 0 0; }

/* Pasif (kullanılamayan) düğmeler: açıkça soluk ve tıklanamaz görünür; neden başlık (title) ve yanındaki notla anlatılır. */
.btn:disabled, .btn[disabled], button.btn:disabled {
    background: #eef1f5 !important;
    color: #8896a6 !important;
    border-color: #d7dde5 !important;
    cursor: not-allowed;
    opacity: .75;
    box-shadow: none !important;
    filter: grayscale(1);
}
.btn:disabled:hover, .btn[disabled]:hover { background: #eef1f5 !important; }

/* Doğrulama kartlarında alan yanına konan açıklama numaraları (¹ ² ³): "Açıklamalar" listesindeki aynı numaraya bakın. */
.dn { color: var(--accent-strong, #0b3357); font-weight: 700; margin-left: 2px; cursor: help; }

/* Form hatası (form-hata.js) ve İl seçici (il-secici.js) */
.alan-hatali, input.alan-hatali, select.alan-hatali, textarea.alan-hatali { border-color: #B71C1C !important; box-shadow: 0 0 0 3px rgba(183, 28, 28, .16); }
.alan-hata-metni { color: #B71C1C; font-size: .84rem; font-weight: 600; margin-top: 4px; }
.il-liste { position: absolute; z-index: 30; left: 0; right: 0; max-height: 240px; overflow-y: auto; margin: 2px 0 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid #C9D6E3; border-radius: 8px; box-shadow: 0 6px 18px rgba(11, 51, 87, .16); }
.il-liste li { padding: 7px 12px; cursor: pointer; font-size: .93rem; }
.il-liste li:hover, .il-liste li.il-secili { background: #EAF1F8; }
.il-liste li.il-bos { color: #5b6b7d; cursor: default; }

/* Yan yana (flex/grid) panellerde ikinci panel aşağı itilmesin: kutular aynı hizada ve eşit yükseklikte durur. */
[style*="display:flex"] > .panel + .panel, [style*="display:grid"] > .panel + .panel { margin-top: 0; }


/* Ekran okuyucuya açık, görsel olarak gizli metin (örn. hesap seçim kutusunun etiketi). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }