/*
  File Atölyesi Soru-Cevap paneli (sss.fileatolyesi.com).
  Etiket panelinin stilinin (panel.css) üstüne yüklenir: düzen, parçalar ve ölçüler aynı, yalnızca renk farklı.
  Etiket fıstık yeşili, Soru-Cevap deniz yeşili; iki panelin ayrı olduğu ilk bakışta anlaşılır.
  Burada yalnızca renkler ve Soru-Cevap'a özel parçalar var: soru listesi satırları, taslak durumları, hareket
  tablosu, soru sayfası. Soru sayfası ve Ayarlar'da iki sütun altın oranda (1,618 : 1).
*/

:root {
  /* Aynı petrol yeşili zemin; kutular biraz daha mavimsi, vurgu deniz yeşili. */
  --ust-zemin: #091514;
  --yuzey: #112220;
  --yuzey-2: #152a28;
  --dolgu: #1a312e;
  --cizgi: #1f3835;
  --cizgi-guclu: #2d4c48;
  --murekkep: #eef4f1;
  --murekkep-2: #c3d4ce;
  --soluk: #8da49e;

  --birincil: #7fd3c3;
  --birincil-2: #97ddcf;
  --birincil-yazi: #072120;
  --ikincil: #1a312e;
  --ikincil-2: #213b38;
  --secili: #143430;
  --odak: #5fb8a8;
}

/* ------------------------------------------------------------ üst çubuk */
/* Bekleyen soru sayısı menüde ve alt menüde */
.sayi {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--onay); color: var(--ters); font: 600 11.5px/1 var(--sans); font-variant-numeric: tabular-nums;
}
.ana-menu a .sayi { margin-left: -2px; }
.alt-menu a { position: relative; }
.alt-menu .sayi { position: absolute; top: 3px; left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; }
/* Telefonda: durum solda, marka ortada, hesap sağda (Etiket'teki zilin yerinde). */
@media (max-width: 899.98px) {
  .ust-cubuk .hesap-menu { display: block; grid-column: 3; grid-row: 1; justify-self: end; }
  .ust-cubuk .hesap-menu > summary { justify-content: center; width: 36px; padding: 0; }
  .ust-cubuk .hesap-menu .ok-isareti { display: none; }
}
/* Dar masaüstünde marka kısalır (menünün dört düğmesi Etiket'tekinden uzun); genişte tam ad ve simgeler. */
@media (min-width: 900px) and (max-width: 1179.98px) {
  .marka-yazi b { display: none; }
}
@media (min-width: 1180px) {
  .ana-menu a { min-width: 0; }
}
/* Yer olunca dört menü düğmesi eşit genişlikte (en uzunu kadar) */
@media (min-width: 1280px) {
  .ana-menu { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ durum kutuları: dört kutu, iki panelde de simetrik */
.durum-kartlari.dort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dk-HAZIR:not(.bos) { --c: var(--hazir); background: var(--hazir-z); border-color: transparent; }
.dk-KONTROL:not(.bos) { --c: var(--onay); background: var(--onay-z); border-color: transparent; }
.dk-SIRADA:not(.bos) { --c: var(--bekle); }
.dk-ELLE:not(.bos) { --c: var(--ok); }
.dk-YAPAY_ZEKA:not(.bos) { --c: var(--kuyruk); }
/* Seçili kutu her zaman vurgu renginde (yukarıdaki renkli kutuların üstüne yazılır) */
.durum-karti[aria-current="page"] { background: var(--birincil); border-color: var(--birincil); --c: var(--birincil-yazi); }

/* Satır durumları (Etiket'teki d-* gibi) */
.s-hazir { color: var(--hazir); background: var(--hazir-z); font-weight: 600; }
.s-kontrol { color: var(--onay); background: var(--onay-z); }
.s-hata { color: var(--hata); background: var(--hata-z); }
.s-sirada { color: var(--bekle); background: var(--bekle-z); }
.s-ok { color: var(--ok); background: var(--ok-z); }
.s-yz { color: var(--kuyruk); background: var(--kuyruk-z); }
.s-pasif { color: var(--pasif); background: var(--pasif-z); }
/* Hareket türleri */
.o-GELDI { color: var(--bekle); background: var(--bekle-z); }
.o-TASLAK, .o-ISTEK { color: var(--kuyruk); background: var(--kuyruk-z); }
.o-GONDERILDI { color: var(--ok); background: var(--ok-z); }
.o-HATA { color: var(--hata); background: var(--hata-z); }
.o-KAPANDI { color: var(--pasif); background: var(--pasif-z); }

/* ------------------------------------------------------------ soru listesi
   Telefonda her soru bir kart: platform | durum, soru, ürün, taslak, son cevap, düğmeler. 1024px'te tablo. */
table.liste.soru-listesi tr { grid-template-areas: "kanal durum" "soru soru" "taslak taslak" "son son" "eylem eylem"; }
td.h-soru { grid-area: soru; margin-top: 4px; }
td.h-taslak { grid-area: taslak; margin-top: 10px; }
td.h-taslak:empty { display: none; }
td.h-son { grid-area: son; margin-top: 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.soru-metni {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  font-weight: 500; color: var(--murekkep); text-decoration: none; overflow-wrap: anywhere;
}
.soru-metni:hover { text-decoration: underline; }
.soru-urun { display: block; margin-top: 3px; font-size: 12.5px; color: var(--soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taslak-metni {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  padding-left: 10px; border-left: 2px solid var(--cizgi-guclu); font-size: 13.5px; line-height: 1.45; color: var(--murekkep-2); overflow-wrap: anywhere;
}
td.h-taslak .icerik-not { margin-top: 6px; }

/* ------------------------------------------------------------ hareket tablosu */
.kim-yz { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--birincil); }
.kim-yz .ikon { width: 15px; height: 15px; }
.hareket-tablosu td.h-ayrinti { overflow-wrap: anywhere; }
.hareket-tablosu td.h-hsoru small { display: block; margin-top: 2px; }
.hareket-tablosu td.h-hsoru .kanal { font-size: 12px; }
.kayit-ozet.dort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ozet-karti.hatali .ozet-sayi { color: var(--hata); }
/* Telefonda kişi süzgeci ve gün seçimi başlığın altında tam genişlikte */
@media (max-width: 639.98px) {
  .sayfa-basi > .gun-secimi { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.2fr) 44px; }
  .gun-secimi select, .gun-secimi input { min-width: 0; width: 100%; }
}
.gun-secimi select { width: auto; }

/* ------------------------------------------------------------ soru sayfası ve ayarlar: altın oran */
.altin { display: grid; gap: 20px; }
.altin > * { min-width: 0; }
.yan-sutun { display: grid; gap: 20px; align-content: start; }
.musteri-sorusu, .verilen-cevap { margin-bottom: 18px; padding: 12px 14px; border-radius: var(--r-kucuk); background: var(--bekle-z); color: var(--bekle); }
.verilen-cevap { margin-bottom: 0; background: var(--ok-z); color: var(--ok); }
.musteri-sorusu b, .verilen-cevap b { display: block; margin-bottom: 2px; font-size: 12.5px; }
.musteri-sorusu p, .verilen-cevap p { white-space: pre-line; overflow-wrap: anywhere; color: var(--murekkep); }
.yz-notu { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--r-kucuk); background: var(--dolgu); color: var(--murekkep-2); font-size: 13px; line-height: 1.45; }
.yz-notu .ikon { width: 16px; height: 16px; margin-top: 1px; color: var(--birincil); }
.yz-notu.uyari { background: var(--onay-z); color: var(--onay); }
.yz-notu.uyari .ikon { color: var(--onay); }
.form h3 { margin-bottom: -6px; }
.alanlar.sayili dd b { font: 600 15px/1.4 var(--mono); margin-right: 4px; }
.bilgi-notu { white-space: pre-line; }
/* Kilitli anahtar alanı: soluk, tıklanamaz; altında kilit notu */
fieldset.kilitli { margin: 0; padding: 0; border: 0; min-width: 0; opacity: .55; }
fieldset.kilitli input, fieldset.kilitli button { cursor: not-allowed; }
.kilit-notu { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--soluk); }
.kilit-notu .ikon { width: 15px; height: 15px; }
.mobil-etiket { color: var(--soluk); }

@media (min-width: 640px) {
  .durum-kartlari.dort { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .alanlar.tek { grid-template-columns: 1fr; gap: 2px; }
  .alanlar.tek dt { margin-top: 12px; }
  .alanlar.tek dt:first-child { margin-top: 0; }
}
@media (min-width: 900px) {
  .altin { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: 24px; }
  .yan-sutun { gap: 24px; }
  .kayit-ozet.dort { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  /* Etiket'te 1180px altında gizlenen 4. sütun burada "Son cevap"; gizlenmez. */
  .tablo-kart table.soru-listesi th { display: table-cell; }
  .tablo-kart table.soru-listesi td.h-soru { width: 36%; padding-left: 24px; }
  .tablo-kart table.soru-listesi td.h-taslak { width: 36%; margin: 0; }
  td.h-taslak:empty { display: table-cell; }  /* taslağı olmayan satırda sütunlar kaymasın */
  /* Tek satırlık ürün adı ve not sütunu genişletmez: hücreye uyar, taşan kısım … ile kısalır (Etiket'teki gibi) */
  td.h-soru .soru-urun, td.h-taslak .icerik-not { width: 0; min-width: 100%; }
  td.h-son { margin: 0; white-space: nowrap; }
  .mobil-etiket { display: none; }
  .soru-metni, .taslak-metni { -webkit-line-clamp: 2; }
  .hareket-tablosu td { vertical-align: top; }
  .hareket-tablosu td.mono, .hareket-tablosu td:nth-child(2), .hareket-tablosu td:nth-child(3) { white-space: nowrap; }
  .hareket-tablosu td.h-ayrinti { width: 45%; }
  .hareket-tablosu td.h-hsoru { width: 26%; }
}
@media (min-width: 1180px) {
  .durum-kartlari.dort { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}