/* ============================================================
   ControlAtWork — marka renk sistemi
   ZUMRUT + ALTIN
   ============================================================

   REFERANS
   Derin zumrut yesili + altin: degerli tas, el yapimi, sessiz luks.
   Bagirmayan bir premium. Bu urun icin dogru cunku konu agir: birinin
   isyerinde gordugu kotu muamele. Parlak, neseli bir palet konuyu
   hafifletirdi.

   TEMEL KARAR
   Urun adi "Control" ile basliyor ama urunun butun degeri kontrol
   ETMEMEKTEN geliyor. Palet bunu duzeltmek zorunda: bir denetim
   panosu gibi degil, GUVENLI VE AGIR BIR ODA gibi gorunmeli.

   Bunun somut karsiligi:
     - Zemin saf beyaz degil, sicak fildisi. Saf beyaz klinik okunuyor.
     - Karanlik zemin saf siyah degil, zumrut-siyah (#071A14).
     - TEK vurgu ailesi var: zumrut. Altin ÇOK az kullanilir —
       degeri kitligindan geliyor.

   ALTIN KURALI
   Ham altin (#C9A227) acik zeminde 2.28:1 — METIN OLARAK YASAK.
   Acik zeminde altin yalnizca DOLGU/CIZGI olarak kullanilir; metin
   gerektiginde koyu altin (#8A6D0B, 4.63:1) kullanilir.
   Koyu zeminde altin 9.35:1 — orada metin olabilir.

   TURKIYE NOTU
   Yesil Turkiye'de dini cagrisim tasiyabilir; bu yuzden PARLAK yesil
   degil DERIN ZUMRUT kullaniliyor ve altinla eslesiyor. Bu eslesme
   degerli tas / kuyumculuk okunur, dini bir kod tasimaz.

   Bayrak kirmizisi + beyaz bilincli olarak DISLANDI: mobbing sikayeti
   toplayan bir urunde siyasi kodlama, guvenli acilma alanini bozar.

   ERISILEBILIRLIK — hesaplanmis oranlar
   Acik: murekkep 13.88 · ikincil 6.46 · ucuncul 4.79 · vurgu 6.11
   Koyu: murekkep 15.90 · ikincil 8.98 · ucuncul 5.54 · vurgu 9.21
   Tum govde ciftleri 4.5:1 uzerinde; kenarliklar 3:1 uzerinde.
   ============================================================ */

:root {
  /* --- Zemin --- */
  --bg:            #FBFAF6;  /* sicak fildisi — saf beyaz DEGIL */
  --surface:       #FFFFFF;  /* yalnizca kartlar; beyaz nadir oldugu icin anlam tasir */
  --surface-2:     #F2EFE6;  /* ic ice panel */

  /* --- Metin --- */
  --ink:           #08271D;  /* 13.88:1 — zumrut murekkep, siyah degil */
  --ink-2:         #46615A;  /*  6.46:1 */
  --ink-3:         #5C716A;  /*  4.79:1 — taban, daha soluk yapilamaz */

  /* --- Cizgi --- */
  --line:          #E3DED4;
  --line-strong:   #7E8D86;  /* 3.09:1 — form ogeleri icin */

  /* --- Vurgu: zumrut --- */
  --accent:        #0D3F2F;  /*  9.63:1 — derin zumrut, ana vurgu */
  --accent-2:      #12674C;  /*  6.11:1 — daha canli zumrut */
  --accent-soft:   #E4EFEA;
  --accent-ink:    #FFFFFF;  /* zumrut uzerinde 10.21:1 */

  /* --- Altin: cok az kullanilir --- */
  --gold:          #D4A82C;  /* SADECE dolgu/cizgi — acik zeminde metin OLAMAZ */
  --gold-ink:      #8A6A08;  /* altinin METIN karsiligi, 4.63:1 */
  --gold-soft:     #F7F0DA;

  /* --- Durum --- */
  --ok:            #146B4E;  --ok-bg:     #E4EFEA;
  --warn:          #8A6D0B;  --warn-bg:   #F7F0DA;
  --danger:        #9C3A22;  --danger-bg: #F8E8E2;  /* kiremit — alev kirmizisi DEGIL */

  /* --- Risk yogunluk rampasi --- */
  /* Trafik isigi DEGIL. Kirmizi rozet, kisinin az once kendisi hakkinda
     yaptigi itirafin ustune yapistirilan bir stres uyaranidir. Tek renkli
     rampa "hukum" degil "buyukluk" okunur. */
  --ramp-1: #E4EFEA;
  --ramp-2: #A9CFBE;
  --ramp-3: #5FA487;
  --ramp-4: #2A7659;
  --ramp-5: #0F4A38;

  /* --- Golge: zumrut tonlu, notr gri degil --- */
  --shadow-sm: 0 1px 2px rgba(10,46,34,.05);
  --shadow:    0 1px 2px rgba(10,46,34,.05), 0 12px 32px rgba(10,46,34,.07);
  --shadow-lg: 0 2px 4px rgba(10,46,34,.05), 0 28px 64px rgba(10,46,34,.12);

  /* --- Olcek --- */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;
}

/* Koyu mod: sistem tercihi. Kullanici acikca sectiyse data-theme kazanir. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #061712;  /* zumrut-siyah */
    --surface:     #0C221B;
    --surface-2:   #132E25;

    --ink:         #E8EFEA;  /* 15.90:1 */
    --ink-2:       #A3B5AC;  /*  8.98:1 */
    --ink-3:       #7A8F86;  /*  5.54:1 */

    --line:        #1E362C;
    --line-strong: #557166;  /* 3.83:1 */

    --accent:      #6FC9A2;  /*  9.21:1 — koyu zeminde zumrut aydinlanir */
    --accent-2:    #5FBF95;  /*  9.73:1 */
    --accent-soft: #0F2C23;
    --accent-ink:  #06231A;  /* zumrut uzerinde 8.76:1 */

    --gold:        #E6C45C;  /*  9.35:1 — koyu zeminde metin OLABILIR */
    --gold-ink:    #E6C45C;  /* 10.96:1 */
    --gold-soft:   #241F10;

    --ok:          #6FC9A2;  --ok-bg:     #0F2C23;
    --warn:        #E6C45C;  --warn-bg:   #241F10;
    --danger:      #E08D72;  --danger-bg: #2E1C17;

    --ramp-1: #10281F;
    --ramp-2: #1A4534;
    --ramp-3: #2C6B52;
    --ramp-4: #4A9C7B;
    --ramp-5: #7FD4AC;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.34);
    --shadow:    0 1px 2px rgba(0,0,0,.34), 0 12px 32px rgba(0,0,0,.30);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.36), 0 28px 64px rgba(0,0,0,.44);
  }
}

/* Kullanicinin acik secimi her zaman kazanir. */
:root[data-theme="dark"] {
  --bg:          #061712;
  --surface:     #0C221B;
  --surface-2:   #132E25;
  --ink:         #E8EFEA;
  --ink-2:       #A3B5AC;
  --ink-3:       #7A8F86;
  --line:        #1E362C;
  --line-strong: #557166;
  --accent:      #6FC9A2;
  --accent-2:    #5FBF95;
  --accent-soft: #0F2C23;
  --accent-ink:  #06231A;
  --gold:        #E6C45C;
  --gold-ink:    #E6C45C;
  --gold-soft:   #241F10;
  --ok:          #6FC9A2;  --ok-bg:     #0F2C23;
  --warn:        #E6C45C;  --warn-bg:   #241F10;
  --danger:      #E08D72;  --danger-bg: #2E1C17;
  --ramp-1: #10281F; --ramp-2: #1A4534; --ramp-3: #2C6B52;
  --ramp-4: #4A9C7B; --ramp-5: #7FD4AC;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.34);
  --shadow:    0 1px 2px rgba(0,0,0,.34), 0 12px 32px rgba(0,0,0,.30);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.36), 0 28px 64px rgba(0,0,0,.44);
}

/* ============================================================
   METALIK YUZEYLER
   ============================================================
   Tek renk sari altin gibi durmuyor — altin, uzerinde acik ve koyu
   bantlar tasidigi icin altin gorunur. Ayni sey zumrut icin de
   gecerli: gercek tasin icinde koyu cekirdek ve parlak yuz vardir.

   Bu yuzden altin ve zumrut METIN olarak birer GRADYAN; duz renk
   degil. background-clip: text ile harflere kirpiliyor.

   Erisilebilirlik: gradyanin EN KOYU ucu bile kontrast esigini
   gecmeli — cunku okuyucu en kotu bandi okur.
     IKI altin gradyani var, cunku WCAG esigi metin boyutuna gore degisir:
       --gold-grad     BUYUK baslik icin. En acik bandi #A87F14 = 3.52:1,
                       buyuk metin esigi 3:1 — gecer.
       --gold-grad-sm  KUCUK metin icin. En acik bandi #8A6A08 = 4.85:1,
                       govde esigi 4.5:1 — gecer.
     Parlak altin (#C9A227) acik zeminde 2.32:1; METIN olarak HICBIR
     boyutta kullanilamaz. Yalnizca dolgu/cizgi olarak yasar.
   ============================================================ */
:root {
  /* En parlak band #AC8618 = 3.25:1 — buyuk metin esigi 3:1, guvenli.
     Daha parlagi (#B8901C 2.85) esigin altina duser ve okunmaz. */
  --gold-grad:    linear-gradient(158deg, #AC8618 0%, #7A5D06 30%, #A88015 52%, #6E5205 78%, #9C7510 100%);
  --gold-grad-sm: linear-gradient(160deg, #8A6A08 0%, #5E4604 40%, #806109 72%, #6E5205 100%);
  --emerald-grad:linear-gradient(165deg, #14664B 0%, #0D3F2F 46%, #0A3527 100%);
}
:root[data-theme="dark"] {
  --gold-grad:    linear-gradient(160deg, #F4DE9C 0%, #E6C45C 30%, #C9A643 62%, #EFD79A 100%);
  --gold-grad-sm: linear-gradient(160deg, #F0D588 0%, #E6C45C 40%, #D4B24E 100%);
  --emerald-grad: linear-gradient(165deg, #A6E5CB 0%, #6FC9A2 48%, #4FA684 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gold-grad:    linear-gradient(160deg, #F4DE9C 0%, #E6C45C 30%, #C9A643 62%, #EFD79A 100%);
    --gold-grad-sm: linear-gradient(160deg, #F0D588 0%, #E6C45C 40%, #D4B24E 100%);
    --emerald-grad: linear-gradient(165deg, #A6E5CB 0%, #6FC9A2 48%, #4FA684 100%);
  }
}

/**
 * Metalik metin.
 *
 * Yedek renk ONCE yaziliyor: background-clip desteklenmezse ya da
 * -webkit onekini tanimayan bir tarayicida metin GORUNMEZ olurdu.
 * Bu haliyle en kotu durumda duz renge duser.
 */
.metal-gold, .metal-gold-sm { color: var(--gold-ink); }
.metal-emerald { color: var(--accent); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .metal-gold {
    background-image: var(--gold-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .metal-gold-sm {
    background-image: var(--gold-grad-sm);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .metal-emerald {
    background-image: var(--emerald-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}

/* ============================================================
   Kelime markasi — TUM SAYFALARDA AYNI
   ============================================================
   Renk "Control"a DEGIL "AtWork"a konur.

   Neden: markanin tek zayifligi ilk kelimenin gozetim gibi okunmasi.
   "Control"u renklendirmek onu yuksek sesli yariya cevirir ve tam da
   yanlis okumayi guclendirir. Ikincil renkte birakmak onu bir
   niteleyiciye dusurur; goz INSANIN oldugu yere, "AtWork"e iner.

   Renk TEK ayirt edici degildir: agirlik da farkli. Renk korlugu olan
   okuyucu ve tek renkli baski icin gerekli.
   ============================================================ */
.wordmark {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 500;
  font-size: 1.42rem;
  letter-spacing: -.018em;
  color: var(--ink-2);
  white-space: nowrap;
  line-height: 1;
  display: inline-block;
}
.wordmark b {
  font-weight: 700;
  color: var(--accent);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .wordmark b {
    background-image: var(--emerald-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  /* Koyu temada AtWork ALTIN: koyu zeminde altin 13.6:1 okunur ve
     zumrut zeminden ayrisir. Acik temada altin metin olarak zayif
     kaldigi icin orada zumrut kaliyor. */
  :root[data-theme="dark"] .wordmark b { background-image: var(--gold-grad); }
}
@media (prefers-color-scheme: dark) {
  @supports (-webkit-background-clip: text) or (background-clip: text) {
    :root:not([data-theme="light"]) .wordmark b { background-image: var(--gold-grad); }
  }
}
.wordmark--sm { font-size: 1.16rem; }
.wordmark--lg { font-size: 1.72rem; }


/* ============================================================
   KOYU BOLGE — temadan bagimsiz
   ============================================================
   Ana sayfada hero, baslik ve footer HER ZAMAN koyu. Kullanicinin
   tema secimi bu bolgeleri ETKILEMEZ; sayfanin geri kalanini eder.

   Neden: koyu zumrut zemin bu markanin en guclu hali ve altin ancak
   orada METIN olabiliyor (acik zeminde altin 2.3:1, okunmaz). Girisi
   ve kapanisi koyu tutup govdeyi temaya birakmak, ikisinin de en iyi
   halini veriyor.

   Degiskenler burada YENIDEN tanimlaniyor; alt ogeler var() ile
   okudugu icin tum bilesenler otomatik uyum sagliyor.
   ============================================================ */
.dark-zone {
  --bg:          #061712;
  --surface:     #0C221B;
  --surface-2:   #132E25;
  --ink:         #E8EFEA;
  --ink-2:       #A3B5AC;
  --ink-3:       #7A8F86;
  --line:        #1E362C;
  --line-strong: #557166;
  --accent:      #6FC9A2;
  --accent-2:    #5FBF95;
  --accent-soft: #0F2C23;
  --accent-ink:  #06231A;
  --gold:        #E6C45C;
  --gold-ink:    #E6C45C;
  --gold-soft:   #241F10;
  --ok:          #6FC9A2;  --ok-bg:     #0F2C23;
  --warn:        #E6C45C;  --warn-bg:   #241F10;
  --danger:      #E08D72;  --danger-bg: #2E1C17;
  --ramp-1: #10281F; --ramp-2: #1A4534; --ramp-3: #2C6B52;
  --ramp-4: #4A9C7B; --ramp-5: #7FD4AC;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.34);
  --shadow:    0 1px 2px rgba(0,0,0,.34), 0 12px 32px rgba(0,0,0,.30);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.36), 0 28px 64px rgba(0,0,0,.44);

  --gold-grad:    linear-gradient(160deg, #F4DE9C 0%, #E6C45C 30%, #C9A643 62%, #EFD79A 100%);
  --gold-grad-sm: linear-gradient(160deg, #F0D588 0%, #E6C45C 40%, #D4B24E 100%);
  --emerald-grad: linear-gradient(165deg, #A6E5CB 0%, #6FC9A2 48%, #4FA684 100%);

  background: var(--bg);
  color: var(--ink);
}
/* Koyu bolgede kelime markasindaki AtWork ALTIN. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .dark-zone .wordmark b { background-image: var(--gold-grad); }
}

/* ============================================================
   Tema dugmesi ikonu — TUM SAYFALAR
   ============================================================
   Burada, header.css icinde degil: ana sayfanin kendi basligi var
   ve header.css orada yuklenmiyor. Kural orada kalinca ana sayfada
   iki ikon ust uste biniyordu.
   ============================================================ */
/* --- Tema dugmesi: ay <-> gunes --- */
.ch-icon, .icon-btn { position: relative; }
.th-ico {
  grid-area: 1 / 1;
  transition: opacity 260ms var(--ease-soft, ease), transform 320ms var(--ease-soft, ease);
}
/* Gorunen ikon HEDEFI gosterir: acikta ay (koyuya gec), koyuda gunes. */
.th-sun  { opacity: 0; transform: rotate(-70deg) scale(.6); }
.th-moon { opacity: 1; transform: none; }
:root[data-theme="dark"] .th-sun  { opacity: 1; transform: none; }
:root[data-theme="dark"] .th-moon { opacity: 0; transform: rotate(70deg) scale(.6); }
@media (prefers-reduced-motion: reduce) { .th-ico { transition: none; } }

/* ============================================================
   Ozel kaydirma cubugu — altin
   ============================================================
   Firefox `scrollbar-color` yalnizca iki duz renk kabul eder
   (gradyan desteklenmiyor), bu yuzden orada tek altin ton
   kullaniliyor; WebKit tarafinda gercek metal gradyani var.
   Genislik 11px: 8px'te tutmak zor, 16px kaba duruyordu.
   ============================================================ */
html {
  scrollbar-width: thin;
  scrollbar-color: #A8811A transparent;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
  background-image: linear-gradient(180deg, #C9A643 0%, #8A6A08 38%, #B8942E 66%, #7A5D06 100%);
}
::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(180deg, #E4C86E 0%, #A8811A 40%, #D8B850 70%, #967310 100%);
}
::-webkit-scrollbar-corner { background: transparent; }


/* Sohbet ekraninin zemini govdeden bir tik ayri: kart yuzeyi
   uzerinde durdugu zeminden ayrilsin. Cok hafif — iki katman
   arasindaki fark hissedilsin ama goze batmasin. */
:root { --chat-bg: #F3F1EA; }
:root[data-theme="dark"] { --chat-bg: #04120E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --chat-bg: #04120E; }
}

/* ============================================================
   Sesli konusma — frekans cubuklari (sohbet ekrani)
   ============================================================
   Ana sayfadaki gosterimle AYNI dil. Amaci suslemek degil, iki
   soruya cevap vermek: sistem beni duyuyor mu, ve ne zaman
   duracak. Cubuklar hareket ediyorsa mikrofon aciktir.

   Cubuk yukseklikleri ve gecikmeleri elle dagitildi; esit
   araliklar metronom gibi duruyor, gercek ses oyle gorunmuyor.
   ============================================================ */
.caw-wave-box {
  flex: 1; min-width: 0; height: 46px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 0 14px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.caw-wave-box[hidden] { display: none; }
.caw-wave-box i {
  width: 3px; border-radius: 2px; background: var(--accent);
  height: 20%; opacity: .5;
}
@media (prefers-reduced-motion: no-preference) {
  .caw-wave-box i { animation: caw-bar 900ms ease-in-out infinite; }
  @keyframes caw-bar {
    0%, 100% { height: 16%; opacity: .4 }
    50%      { height: 82%; opacity: 1 }
  }
  .caw-wave-box i:nth-child(1)  { animation-delay: -.72s; animation-duration: 820ms }
  .caw-wave-box i:nth-child(2)  { animation-delay: -.31s; animation-duration: 1040ms }
  .caw-wave-box i:nth-child(3)  { animation-delay: -.55s; animation-duration: 760ms }
  .caw-wave-box i:nth-child(4)  { animation-delay: -.08s; animation-duration: 980ms }
  .caw-wave-box i:nth-child(5)  { animation-delay: -.44s; animation-duration: 700ms }
  .caw-wave-box i:nth-child(6)  { animation-delay: -.19s; animation-duration: 1120ms }
  .caw-wave-box i:nth-child(7)  { animation-delay: -.63s; animation-duration: 860ms }
  .caw-wave-box i:nth-child(8)  { animation-delay: -.27s; animation-duration: 940ms }
  .caw-wave-box i:nth-child(9)  { animation-delay: -.50s; animation-duration: 790ms }
  .caw-wave-box i:nth-child(10) { animation-delay: -.12s; animation-duration: 1010ms }
  .caw-wave-box i:nth-child(11) { animation-delay: -.38s; animation-duration: 880ms }
}

/* Desifre edilen metin cubuklarin ALTINDA canli yazilir: kisi
   soyledigi seyin dogru anlasilip anlasilmadigini aninda gorur.
   Bos oldugunda hic yer kaplamaz. */
.caw-live {
  padding: 0 20px 8px; margin: 0;
  font-size: 14px; line-height: 1.5; text-align: center;
  color: var(--ink-2); min-height: 0;
}
.caw-live:empty { display: none; }
.caw-live b { color: var(--ink); font-weight: 500; }
/* Henuz kesinlesmemis (interim) metin soluk: tanima devam ediyor. */
.caw-live i { font-style: normal; color: var(--ink-3); }

/* --- Panel: ust serideki yenile dugmesi --- */
.p-top-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.p-refresh {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: .86rem; font-weight: 600;
  padding: 8px 13px; border-radius: 10px; cursor: pointer;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: color 180ms, border-color 180ms, background 180ms;
}
.p-refresh:hover { color: var(--ink); border-color: var(--accent); }
.p-refresh.is-busy { color: var(--ink-3); cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .p-refresh.is-busy svg { animation: p-spin 700ms linear infinite; }
  @keyframes p-spin { to { transform: rotate(360deg); } }
}
@media (max-width: 520px) { .p-refresh span { display: none; } }

/* ============================================================
   PANEL — ana sayfayla ayni dil
   ============================================================
   Panel kendi tasarim sistemini kullaniyor (--p-*), ama artik
   degerleri buradan aliyor. Asagidakiler paletin otesinde kalan
   birkac gorsel duzeltme: marka, ust serideki tema/dil ogeleri.
   ============================================================ */

/* Kenar cubugundaki marka: kelime markasi + kurum adi. */
.p-brand {
  display: grid; gap: 3px; text-decoration: none;
  padding-bottom: 4px;
}
.p-tenant {
  font-size: .78rem; letter-spacing: .02em;
  color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Ust seridin ikon dugmesi — ana sayfadaki .icon-btn ile ayni olcu. */
.p-icon {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; position: relative;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink-3);
  transition: color 200ms, border-color 200ms;
}
.p-icon:hover { color: var(--ink); border-color: var(--line-strong); }
.p-lang-slot { display: flex; flex: none; }
.p-lang-slot .caw-lang { transform: scale(.86); transform-origin: center; }

/* Ust serideki ogeler sagda toplansin; baslik solda kalsin. */
.p-top { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.p-top > div:first-child { flex: 1; min-width: 0; }

@media (max-width: 560px) {
  .p-lang-slot .caw-lang { transform: scale(.74); margin-inline: -6px; }
  .p-icon { width: 30px; height: 30px; }
}

/* Panelde de altin ust hat: kartlar ana sayfadaki kartlarla ayni
   imzayi tasisin. Yalnizca ana panelde — her kutuda tekrarlanirsa
   imza olmaktan cikip gurultuye doner. */
.p-panel { position: relative; overflow: hidden; }
.p-panel::before {
  content: '';
  position: absolute; left: 16%; right: 16%; top: -1px; height: 2px;
  border-radius: 99px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .5;
}

/* ============================================================
   Panel — form yerlesimi
   ============================================================
   .p-field yatay filtre satirlari icin yazilmisti (label + dar
   input yan yana). Sifre degistirme gibi DIKEY formlarda ise
   input daraliyor ve altindaki dugme ona yapisiyordu.
   Dikey formlar icin ayri bir sinif var.
   ============================================================ */
.p-form { display: grid; gap: 14px; max-width: 360px; margin-top: 16px; }
.p-form .p-field { gap: 6px; }
.p-form .p-input { width: 100%; min-width: 0; margin: 0; }
.p-form .p-label {
  font-size: .8rem; font-weight: 600; color: var(--ink-2);
}
/* Dugme kendi satirinda, alanlardan ayrik. */
.p-form .p-btn { justify-self: start; margin-top: 4px; }
.p-sub {
  margin: 6px 0 0; font-size: .88rem; line-height: 1.55; color: var(--ink-2);
}