/* Peak & Ghost — tema sistemi. Renk ve yazı rolleri değişkende; açık/koyu görünüm varsayılan olarak Mac'in ayarını izler,
   başlıktaki tuşla elle de seçilebilir (Saltuk, 17 Eylül: "karanlık aydınlık tema yapalım tuş olsun"). Paletler: kâğıt · granit · ceviz · sistem.
   Her yazı rengi zemin/yüzey/yüzey2 üstünde ≥ 4,5:1 (16 Eylül 2026'da hesaplandı). */
:root {
  --font-govde: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-baslik: "New York", ui-serif, "Iowan Old Style", Georgia, serif;
  --font-veri: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --r: 12px;
}
:root[data-font="sf"] { --font-baslik: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; }
:root[data-font="newyork"] { --font-baslik: "New York", ui-serif, "Iowan Old Style", Georgia, serif; }
:root[data-font="avenir"] { --font-baslik: "Avenir Next", "Avenir", -apple-system, system-ui, sans-serif; }
/* Peak Agency kimliği (4 Ekim 2026, Saltuk: "marka kimliğini de uyarla"). Kaynak: 🏰 300-Projects/Peak-Ajans/kimlik/
   Peak-Agency-Marka-Kimligi-v1/06-Arayuz-Kiti (tema.css, token-esleme.md). Yazı dosyaları web/ içinde, ağdan çekilmez.
   Koyu yüzde kobalt küçük metinde okunmaz (3,44 : 1); panelde --vurgu hem dolgu hem metin olduğu için koyuda buz mavisi. */
@font-face { font-family: "Geist"; src: url("geist.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("dmserif-italik.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
:root[data-font="geist"] {
  --font-govde: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-baslik: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-veri: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-vurgu: "DM Serif Display", Georgia, "Times New Roman", serif;
}
:root[data-tema="peak"] {
  --zemin: #F6F7FA;
  --yuzey: #FFFFFF;
  --yuzey2: #EEF0F5;
  --cizgi: #E6E8EE;
  --cizgi2: #CDD1DB;
  --metin: #0A0A0A;
  --metin2: #2B2E38;
  --soluk: #5B6070;
  --vurgu: #1E50FF;
  --vurgu-ust: #FFFFFF;
  --iyi: #1E7A3C;
  --orta: #8A5A00;
  --kotu: #C0271D;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="peak"]:not([data-mod="acik"]) {
  --zemin: #0A0A0A;
  --yuzey: #15161A;
  --yuzey2: #1E2026;
  --cizgi: #26282F;
  --cizgi2: #3A3D47;
  --metin: #FFFFFF;
  --metin2: #D5D8E0;
  --soluk: #A3A8B4;
  --vurgu: #7FD4FF;
  --vurgu-ust: #0A0A0A;
  --iyi: #5ED38A;
  --orta: #FFB547;
  --kotu: #FF7B72;
  color-scheme: dark;
  }
}
:root[data-tema="peak"][data-mod="koyu"] {
  --zemin: #0A0A0A;
  --yuzey: #15161A;
  --yuzey2: #1E2026;
  --cizgi: #26282F;
  --cizgi2: #3A3D47;
  --metin: #FFFFFF;
  --metin2: #D5D8E0;
  --soluk: #A3A8B4;
  --vurgu: #7FD4FF;
  --vurgu-ust: #0A0A0A;
  --iyi: #5ED38A;
  --orta: #FFB547;
  --kotu: #FF7B72;
  color-scheme: dark;
}
:root, :root[data-tema="kagit"] {
  --zemin: #FAF8F3;
  --yuzey: #FFFFFF;
  --yuzey2: #F2EEE5;
  --cizgi: #E6E0D4;
  --cizgi2: #D6CEBF;
  --metin: #23211D;
  --metin2: #4A453D;
  --soluk: #6E685D;
  --vurgu: #1F4E5F;
  --vurgu-ust: #FFFFFF;
  --iyi: #2A6B45;
  --orta: #865A0C;
  --kotu: #A93A29;
  color-scheme: light;
}
:root[data-tema="granit"] {
  --zemin: #F3F5F7;
  --yuzey: #FFFFFF;
  --yuzey2: #E9EDF1;
  --cizgi: #D9E0E6;
  --cizgi2: #C3CCD5;
  --metin: #141C24;
  --metin2: #39444F;
  --soluk: #5B6773;
  --vurgu: #1D5BA6;
  --vurgu-ust: #FFFFFF;
  --iyi: #1F7148;
  --orta: #8A5800;
  --kotu: #B0281C;
  color-scheme: light;
}
:root[data-tema="ceviz"] {
  --zemin: #F7F3EE;
  --yuzey: #FFFFFF;
  --yuzey2: #EEE7DD;
  --cizgi: #E0D6C8;
  --cizgi2: #CFC2B1;
  --metin: #2A211B;
  --metin2: #53463B;
  --soluk: #72655A;
  --vurgu: #6B4226;
  --vurgu-ust: #FFFFFF;
  --iyi: #3A6A33;
  --orta: #83570D;
  --kotu: #A63A2B;
  color-scheme: light;
}
:root[data-tema="sistem"] {
  --zemin: #F5F5F7;
  --yuzey: #FFFFFF;
  --yuzey2: #EDEDF0;
  --cizgi: #DCDCE0;
  --cizgi2: #C7C7CC;
  --metin: #1D1D1F;
  --metin2: #3C3C43;
  --soluk: #636366;
  --vurgu: #0066CC;
  --vurgu-ust: #FFFFFF;
  --iyi: #1E7A3C;
  --orta: #8A5A00;
  --kotu: #C0271D;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {

  :root:not([data-mod="acik"]), :root[data-tema="kagit"]:not([data-mod="acik"]) {
  --zemin: #191816;
  --yuzey: #211F1C;
  --yuzey2: #2A2824;
  --cizgi: #3A3732;
  --cizgi2: #4A463F;
  --metin: #EFEBE4;
  --metin2: #D0CAC0;
  --soluk: #A69F93;
  --vurgu: #8CC3D4;
  --vurgu-ust: #10232A;
  --iyi: #86CFA0;
  --orta: #E7B865;
  --kotu: #F2937F;
  color-scheme: dark;
  }
  :root[data-tema="granit"]:not([data-mod="acik"]) {
  --zemin: #0E1318;
  --yuzey: #151B21;
  --yuzey2: #1C242B;
  --cizgi: #28313A;
  --cizgi2: #36404A;
  --metin: #E7ECF1;
  --metin2: #C3CCD5;
  --soluk: #8F9BA7;
  --vurgu: #79AEEB;
  --vurgu-ust: #0B1826;
  --iyi: #6FD29D;
  --orta: #F0BA6A;
  --kotu: #F48C82;
  color-scheme: dark;
  }
  :root[data-tema="ceviz"]:not([data-mod="acik"]) {
  --zemin: #1A1613;
  --yuzey: #221D19;
  --yuzey2: #2C2520;
  --cizgi: #3C332C;
  --cizgi2: #4C423A;
  --metin: #F1EAE2;
  --metin2: #D5C9BC;
  --soluk: #AB9D8F;
  --vurgu: #DDAA7C;
  --vurgu-ust: #24170D;
  --iyi: #A2CF8B;
  --orta: #E8B762;
  --kotu: #F09380;
  color-scheme: dark;
  }
  :root[data-tema="sistem"]:not([data-mod="acik"]) {
  --zemin: #000000;
  --yuzey: #1C1C1E;
  --yuzey2: #2C2C2E;
  --cizgi: #3A3A3C;
  --cizgi2: #48484A;
  --metin: #F5F5F7;
  --metin2: #D1D1D6;
  --soluk: #98989D;
  --vurgu: #4DA3FF;
  --vurgu-ust: #001A33;
  --iyi: #5ED38A;
  --orta: #FFB547;
  --kotu: #FF7B72;
  color-scheme: dark;
  }

}
/* Elle seçilen koyu görünüm (başlıktaki tuş): sistem ayarından bağımsız. */

:root[data-mod="koyu"], :root[data-tema="kagit"][data-mod="koyu"] {
  --zemin: #191816;
  --yuzey: #211F1C;
  --yuzey2: #2A2824;
  --cizgi: #3A3732;
  --cizgi2: #4A463F;
  --metin: #EFEBE4;
  --metin2: #D0CAC0;
  --soluk: #A69F93;
  --vurgu: #8CC3D4;
  --vurgu-ust: #10232A;
  --iyi: #86CFA0;
  --orta: #E7B865;
  --kotu: #F2937F;
  color-scheme: dark;
}
:root[data-tema="granit"][data-mod="koyu"] {
  --zemin: #0E1318;
  --yuzey: #151B21;
  --yuzey2: #1C242B;
  --cizgi: #28313A;
  --cizgi2: #36404A;
  --metin: #E7ECF1;
  --metin2: #C3CCD5;
  --soluk: #8F9BA7;
  --vurgu: #79AEEB;
  --vurgu-ust: #0B1826;
  --iyi: #6FD29D;
  --orta: #F0BA6A;
  --kotu: #F48C82;
  color-scheme: dark;
}
:root[data-tema="ceviz"][data-mod="koyu"] {
  --zemin: #1A1613;
  --yuzey: #221D19;
  --yuzey2: #2C2520;
  --cizgi: #3C332C;
  --cizgi2: #4C423A;
  --metin: #F1EAE2;
  --metin2: #D5C9BC;
  --soluk: #AB9D8F;
  --vurgu: #DDAA7C;
  --vurgu-ust: #24170D;
  --iyi: #A2CF8B;
  --orta: #E8B762;
  --kotu: #F09380;
  color-scheme: dark;
}
:root[data-tema="sistem"][data-mod="koyu"] {
  --zemin: #000000;
  --yuzey: #1C1C1E;
  --yuzey2: #2C2C2E;
  --cizgi: #3A3A3C;
  --cizgi2: #48484A;
  --metin: #F5F5F7;
  --metin2: #D1D1D6;
  --soluk: #98989D;
  --vurgu: #4DA3FF;
  --vurgu-ust: #001A33;
  --iyi: #5ED38A;
  --orta: #FFB547;
  --kotu: #FF7B72;
  color-scheme: dark;
}

:root {
  /* türetilmiş roller */
  --kagit: var(--zemin);
  --vurgu-acik: color-mix(in srgb, var(--vurgu) 13%, var(--yuzey));
  --yesil: var(--iyi);
  --amber: var(--orta);
  --kirmizi: var(--kotu);
  --kirmizi-acik: color-mix(in srgb, var(--kotu) 12%, var(--yuzey));
  --amber-acik: color-mix(in srgb, var(--orta) 14%, var(--yuzey));
  --bas-zemin: color-mix(in srgb, var(--zemin) 92%, transparent);
  --isaret: color-mix(in srgb, var(--orta) 30%, var(--yuzey));
  --golge: 0 6px 24px color-mix(in srgb, var(--metin) 8%, transparent);
  --serif: var(--font-baslik);
  --sans: var(--font-govde);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--kagit); color: var(--metin); font: 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--vurgu); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
kbd { font: 11px var(--sans); opacity: .65; margin-left: 4px; }
code { font: 12.5px var(--mono); background: var(--yuzey2); padding: 1px 5px; border-radius: 4px; }
input, select, textarea { font: inherit; color: var(--metin); background: var(--yuzey); border: 1px solid var(--cizgi2); border-radius: 8px; padding: 7px 10px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--vurgu-acik); border-color: var(--vurgu); }
textarea { width: 100%; resize: vertical; line-height: 1.55; }
.serif { font-family: var(--serif); }
.soluk { color: var(--soluk); }
.kucuk { font-size: 13px; }

/* Düğmeler */
.dug { font: 500 13.5px var(--sans); cursor: pointer; border-radius: 999px; padding: 7px 16px; border: 1px solid transparent; background: var(--metin); color: var(--kagit); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.dug:hover { background: color-mix(in srgb, var(--metin) 85%, var(--zemin)); text-decoration: none; }
.dug.vurgu { background: var(--vurgu); color: var(--vurgu-ust); }
.dug.vurgu:hover { background: color-mix(in srgb, var(--vurgu) 85%, var(--metin)); }
.dug.cerceve { background: transparent; color: var(--metin); border-color: var(--cizgi2); }
.dug.cerceve:hover { background: var(--yuzey); }
.dug.hayalet { background: transparent; color: var(--soluk); padding: 5px 9px; }
.dug.hayalet:hover { background: var(--yuzey2); color: var(--metin); }
.dug.tehlike { background: transparent; color: var(--kirmizi); border-color: color-mix(in srgb, var(--kotu) 35%, var(--yuzey)); }
.dug.kucuk { padding: 4px 11px; font-size: 12.5px; }
.dug:disabled { opacity: .45; cursor: default; }

/* Başlık */
.bas { position: sticky; top: 0; z-index: 20; background: var(--bas-zemin); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--cizgi); }
.bas-ic { display: flex; align-items: center; gap: 30px; padding: 0 48px; height: 62px; }
.logo { font: 600 21px var(--serif); color: var(--metin); letter-spacing: -.01em; white-space: nowrap; }
.logo:hover { text-decoration: none; }
.logo em { font-style: normal; color: var(--vurgu); }
.ana-menu { display: flex; gap: 4px; height: 100%; }
.ana-menu a { display: flex; align-items: center; padding: 0 11px; color: var(--soluk); font-size: 14.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ana-menu a:hover { color: var(--metin); text-decoration: none; }
.ana-menu a.aktif { color: var(--metin); font-weight: 600; border-bottom-color: var(--vurgu); }
.ana-menu .say { font-size: 11px; background: var(--kirmizi); color: var(--zemin); border-radius: 999px; padding: 0 6px; margin-left: 5px; line-height: 17px; }
.bas-sag { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.marka-sec { font-size: 13.5px; padding: 5px 10px; border-radius: 8px; border-color: var(--cizgi2); background: var(--yuzey); }
.mod-dugme { font: 15px/1 var(--sans); color: var(--metin2); background: var(--yuzey); border: 1px solid var(--cizgi2); border-radius: 8px; width: 32px; height: 30px; display: grid; place-items: center; cursor: pointer; flex: none; transition: background .2s var(--yay), color .2s var(--yay); }
.mod-dugme:hover { background: var(--yuzey2); color: var(--metin); }
.komut-dugme { font: 13.5px var(--sans); color: var(--soluk); background: var(--yuzey); border: 1px solid var(--cizgi2); border-radius: 8px; padding: 5px 12px; cursor: pointer; min-width: 150px; text-align: left; display: flex; justify-content: space-between; }
.alt-menu { display: flex; gap: 6px; padding: 8px 48px 10px; overflow-x: auto; align-items: center; }
.alt-menu a { font-size: 13.5px; color: var(--metin2); padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.alt-menu a:hover { background: var(--yuzey2); text-decoration: none; }
.alt-menu a.aktif { background: var(--metin); color: var(--kagit); }
.alt-menu .ayrac { width: 1px; background: var(--cizgi2); margin: 4px 6px; }
.alt-menu .etiket { white-space: nowrap; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); align-self: center; padding: 0 4px 0 8px; }

/* Sayfa */
.sayfa { max-width: 1240px; margin: 0 auto; padding: 40px 48px 140px; }
.sayfa.genis { max-width: none; }
.sayfa.genis .tablo-kap { max-height: calc(100vh - 290px); }
.ust-etiket { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--vurgu); font-weight: 600; }
h1 { font: 600 40px/1.1 var(--serif); letter-spacing: -.02em; margin: 8px 0 12px; }
h1.dev { font-size: 48px; line-height: 1.06; }
h2 { font: 600 22px/1.25 var(--serif); margin: 0 0 4px; }
h3 { font: 600 17px/1.3 var(--serif); margin: 0 0 6px; }
.lede { font: 19px/1.55 var(--serif); color: var(--metin2); margin: 0; max-width: 680px; }
.aciklama { color: var(--soluk); margin: 0 0 22px; max-width: 760px; }
.bolum-bas { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.bolum-bas .bosluk { flex: 1; }
.bos { color: var(--soluk); padding: 40px; text-align: center; font-family: var(--serif); font-size: 17px; }
.cizgi-alt { border-bottom: 1px solid var(--cizgi); }
.rozet { display: inline-block; font-size: 11.5px; border-radius: 999px; padding: 1px 9px; background: var(--yuzey2); color: var(--metin2); white-space: nowrap; font-weight: 500; }
.rozet.yesil { background: var(--vurgu-acik); color: var(--vurgu); }
.rozet.kirmizi { background: var(--kirmizi-acik); color: var(--kirmizi); }
.rozet.amber { background: var(--amber-acik); color: var(--amber); }
.sahip { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--vurgu); font-weight: 650; }
.iyi { color: var(--yesil); } .kotu { color: var(--kirmizi); } .orta { color: var(--amber); }
.sayi { font-variant-numeric: tabular-nums; }

/* Bugün */
.brif { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: end; padding-bottom: 36px; border-bottom: 1px solid var(--cizgi); }
.rakamlar { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); border-radius: var(--r); overflow: hidden; }
.rakam { background: var(--yuzey); padding: 16px 18px; min-height: 108px; }
.rakam small { color: var(--soluk); font-size: 12.5px; display: block; }
.rakam .d { font: 600 32px/1.1 var(--font-baslik); font-feature-settings: "tnum"; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.rakam i { font-style: normal; font-size: 12.5px; color: var(--soluk); }
.cubuklar { height: 30px; display: flex; align-items: flex-end; gap: 4px; margin-top: 8px; }
.cubuklar span { flex: 1; background: var(--cizgi2); border-radius: 2px; min-height: 2px; }
.cubuklar span.son { background: var(--vurgu); }
.kolonlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; margin-top: 34px; }
.kolon > p { color: var(--soluk); font-size: 13.5px; margin: 0 0 14px; }
.madde { padding: 15px 0; border-top: 1px solid var(--cizgi); }
.madde > b { display: block; font-weight: 600; margin-top: 1px; }
.madde > p, .madde .p { margin: 3px 0 0; color: var(--metin2); font-size: 14.5px; }
.madde .dugmeler { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.madde.tikla { cursor: pointer; }
.madde.tikla:hover b { color: var(--vurgu); }
.mini { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13.5px; }
.mini td { padding: 5px 0; border-top: 1px solid var(--cizgi); }
.mini td + td { text-align: right; font-variant-numeric: tabular-nums; padding-left: 8px; }

/* Kart listesi (tablolar) */
.arac-cubugu { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.arac-cubugu input[type=search] { width: 260px; }
.gecis { display: inline-flex; border: 1px solid var(--cizgi2); border-radius: 999px; overflow: hidden; background: var(--yuzey); }
.gecis button { font: 13px var(--sans); border: 0; background: transparent; padding: 5px 13px; cursor: pointer; color: var(--metin2); }
.gecis button.aktif { background: var(--metin); color: var(--kagit); }
.kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 16px 18px; cursor: pointer; transition: border-color .12s, box-shadow .12s; display: flex; flex-direction: column; gap: 8px; }
.kart:hover { border-color: var(--cizgi2); box-shadow: var(--golge); }
.kart .kb { font: 600 16.5px/1.35 var(--serif); }
.kart .ozet { color: var(--metin2); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kart .alanlar { display: flex; flex-wrap: wrap; gap: 6px; }
.alan { font-size: 12px; background: var(--yuzey2); border-radius: 6px; padding: 2px 8px; color: var(--metin2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alan b { font-weight: 500; color: var(--soluk); }
.ust-bilgi { color: var(--soluk); font-size: 13px; margin: -10px 0 16px; }

/* Veri tablosu */
.tablo-kap { overflow: auto; border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--yuzey); max-height: calc(100vh - 250px); }
table { border-collapse: collapse; width: 100%; }
.veri th, .veri td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--cizgi); font-size: 13.5px; }
.veri th { position: sticky; top: 0; background: var(--yuzey2); font-weight: 600; font-size: 12px; color: var(--metin2); z-index: 2; white-space: nowrap; }
.veri td { max-width: 320px; }
.veri td .kisa { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.veri td.num, .veri th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.veri tbody tr { cursor: pointer; }
.veri tbody tr:hover td { background: color-mix(in srgb, var(--vurgu) 5%, var(--yuzey)); }
/* Drive görünümü: sabit genişlik, hücre metni sarılır (Sheets gibi), sabitlenmiş sütunlar */
.veri.drive { table-layout: fixed; }
.veri.drive th { white-space: normal; vertical-align: bottom; line-height: 1.3; overflow-wrap: anywhere; }
.veri.drive td { max-width: none; overflow-wrap: anywhere; }
.veri.drive td .kisa { -webkit-line-clamp: 6; white-space: pre-wrap; }
.veri td.sabit { background: var(--yuzey); font-weight: 500; box-shadow: inset -1px 0 0 var(--cizgi2); }
.veri th.sabit { z-index: 4 !important; background: var(--yuzey2); box-shadow: inset -1px 0 0 var(--cizgi2); }
.sutun-sec { position: relative; }
.sutun-sec .liste { position: absolute; right: 0; top: 38px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 10px; box-shadow: 0 12px 36px rgba(0,0,0,.12); padding: 8px; z-index: 30; max-height: 360px; overflow-y: auto; width: 280px; }
.sutun-sec label { display: flex; gap: 8px; align-items: center; padding: 4px 6px; font-size: 13px; border-radius: 6px; cursor: pointer; }
.sutun-sec label:hover { background: var(--yuzey2); }

/* Çekmece (satır detayı) */
.perde { position: fixed; inset: 0; background: color-mix(in srgb, var(--metin) 18%, transparent); z-index: 40; }
.cekmece { position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 94vw); background: var(--kagit); border-left: 1px solid var(--cizgi); z-index: 41; display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(0,0,0,.08); }
.cekmece-bas { display: flex; gap: 12px; align-items: flex-start; padding: 22px 26px 14px; border-bottom: 1px solid var(--cizgi); }
.cekmece-bas > div { flex: 1; font: 600 20px/1.3 var(--serif); }
.cekmece-bas small { display: block; font: 12.5px var(--sans); color: var(--soluk); margin-bottom: 3px; }
.cekmece-govde { flex: 1; overflow-y: auto; padding: 18px 26px; display: flex; flex-direction: column; gap: 14px; }
.cekmece-govde label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--soluk); font-weight: 500; }
.cekmece-govde textarea { font-size: 14.5px; min-height: 42px; background: var(--yuzey); }
.cekmece-alt { display: flex; gap: 8px; padding: 14px 26px; border-top: 1px solid var(--cizgi); background: var(--yuzey); }
.cekmece-alt .bosluk { flex: 1; }

/* Belge */
.belge-duzen { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 44px; align-items: start; }
.icindekiler { position: sticky; top: 130px; max-height: calc(100vh - 160px); overflow-y: auto; font-size: 13px; border-left: 1px solid var(--cizgi); padding-left: 14px; }
.icindekiler a { display: block; color: var(--soluk); padding: 3px 0; line-height: 1.35; }
.icindekiler a.d3 { padding-left: 12px; font-size: 12.5px; }
.icindekiler a:hover { color: var(--vurgu); text-decoration: none; }
.md { font-size: 16px; line-height: 1.7; max-width: 820px; color: var(--metin); }
.md h1 { font-size: 32px; margin-top: 0; }
.md h2 { font-size: 25px; margin: 40px 0 10px; padding-top: 10px; border-top: 1px solid var(--cizgi); }
.md h3 { font-size: 18.5px; margin: 26px 0 6px; }
.md p { margin: 0 0 12px; }
.md strong { font-weight: 650; }
.md .tablo-kap { max-height: none; margin: 14px 0 18px; }
.md table th, .md table td { padding: 8px 11px; border-bottom: 1px solid var(--cizgi); text-align: left; vertical-align: top; font-size: 13.5px; line-height: 1.5; }
.md table th { background: var(--yuzey2); font-weight: 600; }
.md blockquote { margin: 14px 0; padding: 8px 18px; border-left: 3px solid var(--vurgu); background: var(--yuzey); border-radius: 0 10px 10px 0; color: var(--metin2); }
.md pre { background: var(--yuzey2); padding: 12px 14px; border-radius: 10px; overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md li.gorev-li { list-style: none; margin-left: -22px; }
.md hr { border: 0; border-top: 1px solid var(--cizgi); margin: 26px 0; }
.meta { font-size: 13px; color: var(--soluk); margin: 0 0 26px; }
.editor { font: 14px/1.6 var(--mono); min-height: calc(100vh - 260px); background: var(--yuzey); padding: 18px; }

/* Listeler: görev, hook */
.liste { display: flex; flex-direction: column; }
.satir { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 4px; border-top: 1px solid var(--cizgi); }
.satir:last-child { border-bottom: 1px solid var(--cizgi); }
.satir .metin { cursor: pointer; font-weight: 500; }
.satir .metin:hover { color: var(--vurgu); }
.satir .alt { font-size: 13px; color: var(--soluk); margin-top: 2px; }
.satir.bitti .metin { text-decoration: line-through; color: var(--soluk); }
.satir .sag { display: flex; gap: 8px; align-items: center; }
.satir select { font-size: 12.5px; padding: 3px 6px; }
.durum-dug { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--cizgi2); background: var(--yuzey); cursor: pointer; font-size: 13px; display: grid; place-items: center; padding: 0; }
.durum-dug:hover { border-color: var(--vurgu); }
.cipler { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.cip { font: 13px var(--sans); background: transparent; border: 1px solid var(--cizgi2); color: var(--metin2); padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.cip:hover { background: var(--yuzey); }
.cip.aktif { background: var(--metin); border-color: var(--metin); color: var(--kagit); }
.hooklar { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.hook { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.hook:hover { border-color: var(--cizgi2); box-shadow: var(--golge); }
.hook q { font: 500 19px/1.35 var(--serif); quotes: "“" "”"; }
.hook dl { margin: 0; display: grid; grid-template-columns: 70px 1fr; gap: 3px 10px; font-size: 13px; }
.hook dt { color: var(--soluk); }
.hook dd { margin: 0; color: var(--metin2); }

/* Kontrol listesi */
.kontrol-baslik { font: 600 18px var(--serif); margin: 28px 0 8px; }
.kontrol-aciklama { color: var(--soluk); font-size: 13.5px; white-space: pre-wrap; margin: 0 0 8px 30px; }
.kontrol-madde { display: flex; gap: 12px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; }
.kontrol-madde:hover { background: var(--yuzey); }
.kontrol-madde input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--vurgu); flex: none; }
.kontrol-madde details summary { cursor: pointer; }
.kontrol-madde details div { white-space: pre-wrap; color: var(--soluk); font-size: 13.5px; margin-top: 6px; }
.ilerleme { height: 6px; background: var(--yuzey2); border-radius: 6px; overflow: hidden; margin-top: 10px; }
.ilerleme div { height: 100%; background: var(--vurgu); }
.kutu { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 18px 20px; }

/* Oyun Kitabı şeridi */
.serit { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.asama { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 6px; border-top-width: 3px; }
.asama .no { font-size: 11px; color: var(--soluk); }
.asama .ad { font: 600 14px/1.25 var(--serif); }
.asama select { font-size: 12px; padding: 3px 5px; }
.asama textarea { font-size: 12px; color: var(--metin2); border: 0; background: transparent; padding: 0; resize: none; min-height: 34px; }
.asama[data-d^="✅"] { border-top-color: var(--yesil); }
.asama[data-d^="🟡"] { border-top-color: var(--orta); }
.asama[data-d^="🔴"] { border-top-color: var(--kirmizi); }
.iki { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 40px; margin-top: 40px; }
.tanim td { padding: 8px 0; border-bottom: 1px solid var(--cizgi); vertical-align: top; font-size: 14px; }
.tanim td:first-child { color: var(--soluk); width: 170px; padding-right: 14px; }
.sayilar { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); border-radius: var(--r); overflow: hidden; }
.sayilar .rakam { min-height: 0; }
.sayilar .rakam .d { font-size: 22px; }

/* Arama, kayıt */
.sonuc { display: block; padding: 14px 4px; border-top: 1px solid var(--cizgi); color: inherit; }
.sonuc:hover { text-decoration: none; background: var(--yuzey); }
.sonuc .parca { color: var(--soluk); font-size: 13.5px; margin-top: 4px; }
mark { background: var(--isaret); color: inherit; border-radius: 3px; padding: 0 1px; }
.olay { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--cizgi); font-size: 13.5px; }

/* Komut paleti */
dialog { border: 0; padding: 0; background: transparent; }
dialog::backdrop { background: rgba(0, 0, 0, .32); }
.komut { width: min(640px, 92vw); margin-top: 12vh; }
.komut-kap { background: var(--kagit); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.25); overflow: hidden; border: 1px solid var(--cizgi); }
.komut-kap input { width: 100%; border: 0; border-bottom: 1px solid var(--cizgi); border-radius: 0; padding: 18px 20px; font: 18px var(--serif); background: transparent; outline: none; }
.komut-liste { max-height: 420px; overflow-y: auto; padding: 6px; }
.komut-liste a { display: flex; gap: 12px; align-items: center; padding: 9px 14px; border-radius: 9px; color: var(--metin); }
.komut-liste a small { margin-left: auto; color: var(--soluk); font-size: 12px; }
.komut-liste a.secili, .komut-liste a:hover { background: var(--metin); color: var(--kagit); text-decoration: none; }
.komut-liste a.secili small, .komut-liste a:hover small { color: color-mix(in srgb, var(--kagit) 75%, var(--metin)); }

/* Modal form */
#modal { width: min(620px, 92vw); }
#modal form { background: var(--kagit); border-radius: 16px; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.25); border: 1px solid var(--cizgi); }
#modal label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--soluk); font-weight: 500; }
#modal .dugmeler { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }

.kaydet-cubugu { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--metin); color: var(--kagit); border-radius: 999px; padding: 7px 7px 7px 20px; display: flex; gap: 10px; align-items: center; box-shadow: 0 12px 40px rgba(0,0,0,.25); z-index: 50; font-size: 14px; }
.dug.acik { background: var(--kagit); color: var(--metin); }
.dug.hayalet-koyu { background: transparent; color: color-mix(in srgb, var(--kagit) 80%, var(--metin)); }
.bildirim { position: fixed; bottom: 22px; right: 22px; background: var(--metin); color: var(--kagit); padding: 10px 16px; border-radius: 12px; z-index: 60; box-shadow: 0 10px 30px rgba(0,0,0,.2); max-width: 440px; font-size: 14px; }
.bildirim.hata { background: var(--kirmizi); color: var(--zemin); }

@media (max-width: 1000px) {
  .bas-ic { padding: 0 20px; gap: 16px; }
  .alt-menu { padding: 8px 20px 10px; }
  .sayfa { padding: 28px 20px 120px; }
  .brif, .kolonlar, .belge-duzen { grid-template-columns: 1fr; gap: 28px; }
  .icindekiler { display: none; }
  .ana-menu a { padding: 0 6px; font-size: 13.5px; }
  .komut-dugme { min-width: 0; }
}

/* Erişilebilirlik (HIG accessibility.md): klavye odağı görünür, eşik bilgisi yalnız renkle verilmez */
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; border-radius: 6px; }
.veri tbody tr:focus-visible { outline-offset: -2px; }
[role="button"] { cursor: pointer; }
.iyi::before, .kotu::before, .orta::before { font-size: .62em; vertical-align: .18em; margin-right: .3em; font-family: var(--font-govde); }
.iyi::before { content: "▲"; }
.kotu::before { content: "▼"; }
.orta::before { content: "●"; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Odak: şu an tek iş — Bugün'ün imza öğesi */
.odak { display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--vurgu-acik); border: 1px solid color-mix(in srgb, var(--vurgu) 30%, var(--cizgi)); border-left: 4px solid var(--vurgu); border-radius: var(--r); padding: 18px 22px; margin-bottom: 34px; }
.odak .odak-metin { font: 600 23px/1.3 var(--font-baslik); margin: 6px 0 4px; max-width: 820px; }
.odak .odak-alt { font-size: 13px; color: var(--metin2); }
.odak .odak-dug { display: flex; gap: 8px; flex-wrap: wrap; }
.odak.bos-odak { border-left-color: var(--cizgi2); background: var(--yuzey); }
.kapi { font-size: 12.5px; border-top: 1px solid var(--cizgi); padding-top: 6px; }
.kapi summary { cursor: pointer; color: var(--metin2); }
.kapi label { display: flex; gap: 7px; align-items: flex-start; padding: 4px 0; color: var(--metin2); line-height: 1.35; cursor: pointer; }
.kapi input { margin-top: 2px; accent-color: var(--vurgu); flex: none; }
.odak > div:first-child { flex: 1 1 520px; }

/* Portföy, ajans, sihirbaz */
.kartlar.portfoy { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.kartlar.portfoy .tanim td { font-size: 13.5px; padding: 6px 0; }
.kartlar.portfoy .tanim td:first-child { width: 130px; }
.kartlar.portfoy .kart.park { opacity: .72; }
.yeni-kart { border-style: dashed; justify-content: center; color: inherit; }
.yeni-kart:hover { text-decoration: none; }
.sihirbaz { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.sihirbaz .kutu { display: flex; flex-direction: column; gap: 10px; }
.sihirbaz label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--soluk); font-weight: 500; }

/* izgara içindeki alanlar kolonu taşmasın */
#cekmeceGovde input, #cekmeceGovde select, .sihirbaz input, .sihirbaz select { min-width: 0; }

/* rapor + kapanış */
.rapor-duzen { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 18px; }
.rapor-duzen aside h2 { font-size: 15px; }
.rapor-metin { min-height: 420px; font-size: 14px; line-height: 1.6; }
.pl-satir { display: grid; grid-template-columns: minmax(0, 1fr) auto 150px; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--cizgi); }
.pl-satir input { text-align: right; min-width: 0; }
.cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.cip { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 5px; font-size: 12px; padding: 3px 8px; border: 1px solid var(--cizgi2); border-radius: 999px; }
.kutu.uyari { border-color: var(--amber); }
.soluk-rozet { opacity: .7; }
@media (max-width: 860px) { .rapor-duzen { grid-template-columns: 1fr; } }

/* karar kutusu + kanallar */
.karar .dugmeler { flex-wrap: wrap; }
.karar-yaz { display: flex; gap: 6px; margin-top: 8px; }
.karar-yaz input { flex: 1; min-width: 0; }
.karar.cevaplandi, .karar.islendi, .karar.iptal { opacity: .92; }
.karar-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.grup-baslik { margin: 18px 0 8px; font-size: 13px; color: var(--metin2); text-transform: uppercase; letter-spacing: .06em; }
.say-kucuk { font-size: 13px; color: var(--metin2); font-weight: 500; margin-left: 6px; }

/* kanal takibi */
table.takip td.sayi, table.takip th.sayi { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.takip tr.takip-bas td { background: var(--yuzey2); padding-top: 10px; }
table.takip tr.takip-not td { font-size: 12.5px; white-space: normal; }
table.takip td.iyi { color: var(--vurgu); font-weight: 600; }
table.takip td.kotu { color: var(--kirmizi); font-weight: 600; }

/* Bugün › kanal şeridi */
.kanal-seridi { margin: 0 0 28px; border: 1px solid var(--cizgi); border-radius: var(--r); overflow-x: auto; cursor: pointer; background: var(--yuzey); }
.kanal-seridi:hover { border-color: var(--cizgi2); }
.kanal-seridi table { margin: 0; }
details.madde > summary { cursor: pointer; list-style: none; }
details.madde > summary::-webkit-details-marker { display: none; }
details.madde[open] > summary { margin-bottom: 8px; }

/* Bugün › dönem bölümleri */
.donemler { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; margin: 0 0 28px; }
.donem { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 16px 16px 8px; min-width: 0; }
.donem-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.donem-ciro { font: 600 26px/1.2 var(--serif); margin: 8px 0 2px; font-variant-numeric: tabular-nums; }
.donem table { margin: 10px -16px 0; width: calc(100% + 32px); }
.donem table td { padding: 6px 16px; font-size: 13.5px; }
.donem table tr.takip-bas td { padding-top: 8px; font-size: 12.5px; }
.fark { font-size: 12px; font-weight: 600; margin-left: 4px; color: var(--metin2); white-space: nowrap; }
.fark.iyi { color: var(--vurgu); }
.fark.kotu { color: var(--kirmizi); }
.donem-ciro .fark { font-size: 14px; font-family: inherit; }
.fark::before, .fark.iyi::before, .fark.kotu::before { content: none !important; }
.donem table td:first-child { white-space: nowrap; }
.donem table td.sayi { color: inherit; }

/* ===================================================================================================
   Apple katmanı (17 Eylül 2026, Saltuk: "daha sade, daha ferah, daha açıklayıcı; Apple animasyonları, Apple fontu").
   İlkeler (apple-design skill): layout.md › "Make essential information easy to find by giving it sufficient space"
   + progressive disclosure · typography.md › az yazı tipi, hiyerarşi boyut ve ağırlıkla · motion.md › kısa, amaçlı,
   isteğe bağlı (prefers-reduced-motion) · writing.md › "If you can use fewer words, do so."
   Bu katman dosyanın sonunda durur ve öncekileri ezer; paletler ve bileşen adları aynı kalır.
   =================================================================================================== */
:root {
  --r: 16px;
  --yay: cubic-bezier(.2, .8, .2, 1);          /* Apple'ın yumuşak çıkışı */
  --yay-sekme: cubic-bezier(.3, 1.3, .5, 1);   /* hafif yaylanma, yalnız seçicide */
  --golge: 0 1px 2px color-mix(in srgb, var(--metin) 5%, transparent), 0 8px 28px color-mix(in srgb, var(--metin) 7%, transparent);
  --font-baslik: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
}
body { font: 15px/1.55 var(--sans); letter-spacing: -.003em; }

/* Başlık çubuğu: daha ince, daha saydam */
.bas { background: color-mix(in srgb, var(--zemin) 72%, transparent); backdrop-filter: saturate(1.8) blur(22px); -webkit-backdrop-filter: saturate(1.8) blur(22px); border-bottom-color: color-mix(in srgb, var(--cizgi) 60%, transparent); }
.bas-ic { height: 56px; gap: 26px; }
.logo { font: 600 18px var(--font-baslik); letter-spacing: -.02em; }
.ana-menu a { border-bottom: 0; margin: 12px 0; padding: 0 12px; border-radius: 999px; font-size: 14px; transition: background .2s var(--yay), color .2s var(--yay); }
.ana-menu a:hover { background: var(--yuzey2); }
.ana-menu a.aktif { background: var(--yuzey2); border-bottom: 0; }
.alt-menu { padding: 2px 48px 12px; gap: 4px; }
.alt-menu a { transition: background .2s var(--yay), color .2s var(--yay); }
.alt-menu .etiket { font-size: 10.5px; opacity: .8; }
.komut-dugme, .marka-sec { border-color: transparent; background: var(--yuzey2); border-radius: 10px; }

/* Sayfa: daha dar ölçü, daha çok boşluk */
.sayfa { max-width: 1120px; padding: 48px 48px 160px; }
.ust-etiket { font-size: 11.5px; letter-spacing: .08em; color: var(--soluk); font-weight: 600; }
h1 { font: 700 32px/1.15 var(--font-baslik); letter-spacing: -.025em; margin: 6px 0 10px; }
h1.dev { font-size: 34px; line-height: 1.12; max-width: 18em; }
h2 { font: 650 20px/1.25 var(--font-baslik); letter-spacing: -.015em; }
h3 { font: 600 16px/1.3 var(--font-baslik); }
.lede { font: 400 16px/1.5 var(--sans); color: var(--soluk); max-width: 640px; cursor: default; }
.lede:not(.acik) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bolum-bas { margin-bottom: 32px; }

/* Düğmeler: basınca küçülür */
.dug { transition: transform .15s var(--yay), background .2s var(--yay), opacity .2s; font-weight: 550; }
.dug:active { transform: scale(.96); }
.dug.cerceve { border-color: transparent; background: var(--yuzey2); }
.dug.cerceve:hover { background: var(--cizgi); }

/* Tek iş şeridi: çerçevesiz, sakin */
.odak { border: 0; border-left: 0; border-radius: var(--r); padding: 20px 24px; background: var(--vurgu-acik); }
.odak .odak-metin { font: 650 20px/1.3 var(--font-baslik); letter-spacing: -.015em; }

/* Brifing */
.brif { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; border-bottom: 0; padding: 40px 0 8px; }
.rakamlar { gap: 12px; background: transparent; border: 0; overflow: visible; }
.rakam { border-radius: var(--r); min-height: 0; padding: 16px 18px; box-shadow: var(--golge); }
.rakam .d { font: 700 28px/1.1 var(--font-baslik); letter-spacing: -.02em; }

/* Satışlar: dönem seçici + dört sayı + kanal satırları */
.donem-blok { margin: 40px 0 8px; }
.donem-ust { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 6px; }
.donem-ust h2 { margin: 0; flex: 1; }
.segment { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); background: var(--yuzey2); border-radius: 10px; padding: 2px; min-width: 300px; }
.segment button { position: relative; z-index: 1; font: 550 13px var(--sans); color: var(--metin2); background: none; border: 0; padding: 6px 12px; cursor: pointer; border-radius: 8px; transition: color .2s; }
.segment button[aria-selected="true"] { color: var(--metin); }
.segment-kaydirak { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / var(--n)); border-radius: 8px; background: var(--yuzey); box-shadow: 0 1px 3px color-mix(in srgb, var(--metin) 18%, transparent); transform: translateX(calc(var(--i) * 100%)); transition: transform .38s var(--yay-sekme); }
.donem-aralik { color: var(--soluk); font-size: 13px; margin: 0 0 16px; }
.kpiler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--yuzey); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--golge); min-width: 0; }
.kpi small { color: var(--soluk); font-size: 12.5px; font-weight: 550; }
.kpi-d { font: 700 30px/1.15 var(--font-baslik); letter-spacing: -.025em; font-variant-numeric: tabular-nums; margin: 6px 0 4px; white-space: nowrap; }
.kpi-alt { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; min-height: 18px; flex-wrap: wrap; }
.fark { margin-left: 0; font-size: 12.5px; }
.kanal-liste { margin-top: 12px; background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge); overflow: hidden; }
.kanal-satir + .kanal-satir { border-top: 1px solid var(--cizgi); }
.kanal-satir summary { display: grid; grid-template-columns: 150px minmax(0, 1fr) 16px; align-items: center; gap: 16px; padding: 14px 20px; cursor: pointer; list-style: none; transition: background .2s var(--yay); }
.kanal-satir summary::-webkit-details-marker { display: none; }
.kanal-satir summary:hover { background: color-mix(in srgb, var(--yuzey2) 55%, transparent); }
.kanal-ad { font-weight: 600; display: flex; align-items: center; gap: 10px; }
.kanal-ad i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.kanal-olculer, .kanal-ayrinti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kanal-ayrinti { padding: 0 52px 16px 186px; }
.kanal-ayrinti p { grid-column: 1 / -1; margin: 0; }
.olcu { min-width: 0; display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
.olcu small { flex-basis: 100%; color: var(--soluk); font-size: 12px; }
.olcu b { font: 600 15.5px var(--font-baslik); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kanal-satir .ok { color: var(--soluk); font-size: 18px; transition: transform .3s var(--yay); justify-self: end; }
.kanal-satir[open] .ok { transform: rotate(90deg); }
.kanal-satir[open] .kanal-ayrinti { animation: belir .32s var(--yay) both; }

/* Üç kolon: kartlar, kısaltılmış metin */
.kolonlar { gap: 20px; margin-top: 44px; }
.kolon { background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge); padding: 22px 22px 8px; min-width: 0; }
/* Bugün › Senden beklenen (1 Ekim): brifingin hemen altında kararlar + Saltuk'un pano kartları; eski "Karar ver" kolonu kalktı, iki kolon kaldı. */
.kolonlar.kolon-iki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .kolonlar.kolon-iki { grid-template-columns: minmax(0, 1fr); } }
.senden { margin-top: 28px; }
.senden-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; margin-bottom: 12px; }
.senden-bas h2 { margin: 0; font-size: 19px; }
.senden-bas p { margin: 0; color: var(--soluk); font-size: 13px; }
.senden-fazla { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.senden > details.madde { margin-top: 10px; }
.kolon > h2 { font-size: 17px; }
.kolon > p { font-size: 13px; margin-bottom: 10px; }
.madde { padding: 14px 0; border-top-color: color-mix(in srgb, var(--cizgi) 70%, transparent); }
.madde > b { font-weight: 600; font-size: 14.5px; line-height: 1.4; }
.madde > p, .madde .p { font-size: 13.5px; color: var(--soluk); }
.madde:not(.acik) > b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.madde:not(.acik) > p, .madde:not(.acik) .p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.madde:not(.acik) .karar-yaz, .madde:not(.acik) > a.soluk { display: none; }
.madde .sahip { font-size: 11px; letter-spacing: .06em; }
.karar-izgara { gap: 16px; }
.karar-izgara .madde, .kartlar .kart, .kutu { border: 0; border-radius: var(--r); box-shadow: var(--golge); }
.karar-izgara .madde { background: var(--yuzey); padding: 18px 20px; }
.kart { transition: transform .25s var(--yay), box-shadow .25s var(--yay); }
.kart:hover { transform: translateY(-2px); }
.tablo-kap { border: 0; box-shadow: var(--golge); }
.rozet { font-weight: 550; }

/* Hareket: sayfa girişi sırayla belirir; dönem değişince içerik yumuşak gelir */
@keyframes belir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Sayfa girişi kısa (30 Eylül: .5 sn → .2 sn) ve dolgu `backwards`: bitmiş animasyon transform'u elinde tutmaz. `both` iken
   .sayfa'nın her çocuğu kalıcı bir yığın bağlamı oluyordu; sonraki kardeş (ör. #ktpIzgara) öncekinin açılır menüsünün
   (#ktpSuz › .ktp-menu-liste) üstüne boyanıyordu. */
.sayfa > * { animation: belir .2s var(--yay) backwards; }
.sayfa > *:nth-child(2) { animation-delay: .02s; }
.sayfa > *:nth-child(3) { animation-delay: .04s; }
.sayfa > *:nth-child(4) { animation-delay: .06s; }
.sayfa > *:nth-child(n+5) { animation-delay: .08s; }
/* Açılır menü taşıyan süzgeç/araç çubukları kendi katmanında: animasyon sürerken de alttaki ızgaranın üstünde, yapışkan başlığın
   (z 20) altında. Ölçek: başlık 20 · süzgeç çubukları 14/15 · perde 40 · çekmece 41 · kaydet çubuğu 50 · bildirim 60. */
.ktp-suz, .arac-cubugu, .kt-suz { position: relative; z-index: 14; }
.donem-govde { animation: belir .36s var(--yay) both; }
.donem-govde .kpi { animation: belir .42s var(--yay) both; }
.donem-govde .kpi:nth-child(2) { animation-delay: .04s; }
.donem-govde .kpi:nth-child(3) { animation-delay: .08s; }
.donem-govde .kpi:nth-child(4) { animation-delay: .12s; }
.cekmece:not([hidden]) { animation: cekmece-gel .42s var(--yay) both; }
@keyframes cekmece-gel { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
dialog[open] { animation: belir .28s var(--yay) both; }
.bildirim:not([hidden]) { animation: belir .3s var(--yay) both; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--vurgu) 55%, transparent); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 980px) {
  .kpiler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kolonlar { grid-template-columns: 1fr; }
  .brif { grid-template-columns: 1fr; gap: 24px; }
  .kanal-satir summary { grid-template-columns: 1fr 16px; }
  .kanal-olculer { grid-column: 1 / -1; grid-row: 2; }
  .kanal-ayrinti { padding: 0 20px 16px; }
  .sayfa { padding: 32px 20px 120px; }
  .bas-ic, .alt-menu { padding-left: 20px; padding-right: 20px; }
}

/* Apple katmanı · ikinci tur: kanal sayfası ve tablolar */
.baslik-rozet { font: 550 12.5px var(--sans); vertical-align: middle; margin-left: 8px; letter-spacing: 0; }
.kunye { display: flex; flex-wrap: wrap; gap: 10px; margin: -12px 0 28px; }
.kunye-oge { background: var(--yuzey2); border-radius: 12px; padding: 9px 14px; display: flex; flex-direction: column; gap: 1px; max-width: 100%; }
.kunye-oge.genis { flex: 1 1 280px; min-width: 0; }
.kunye-oge small { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--soluk); }
.kunye-oge span { font-size: 13.5px; color: var(--metin2); line-height: 1.4; }
.kunye-oge.genis span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kunye-oge.genis:hover span { -webkit-line-clamp: unset; }
.olcum-kpi { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 20px; }
.olcum-kpi .kpi-d { font-size: 24px; white-space: normal; }
.olcum-kpi .kpi-alt { gap: 4px 12px; }
.iki-kart { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.iki-kart .kolon > h2 { margin-bottom: 8px; }
.madde.sira { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.madde.sira > b { flex: 1; min-width: 0; font-weight: 500; }
.madde.sira .rozet { flex: none; max-width: 40%; white-space: normal; text-align: right; }
.bos-satir { padding: 10px 0 16px; margin: 0; }
.plan-cubuk { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 40px 0 0; }
.plan-cubuk h2 { margin: 0; font-size: 17px; }
.belge-kart { background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge); padding: 28px 32px; margin-top: 16px; animation: belir .4s var(--yay) both; }
.belge-kart .md { max-width: 760px; }
@media (max-width: 980px) { .iki-kart { grid-template-columns: 1fr; } }

/* Tablolar: daha yüksek satır, daha hafif çizgi, sakin başlık */
.veri th, .veri td { padding: 12px 14px; border-bottom-color: color-mix(in srgb, var(--cizgi) 65%, transparent); }
.veri th { background: color-mix(in srgb, var(--yuzey) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 11.5px; letter-spacing: .02em; color: var(--soluk); white-space: normal; vertical-align: bottom; line-height: 1.3; hyphens: none; overflow-wrap: normal; word-break: keep-all; }
.veri td { font-size: 13.5px; }
.veri tbody tr { transition: background .15s; }
.veri tbody tr:hover td { background: color-mix(in srgb, var(--vurgu) 6%, var(--yuzey)); }
.veri tbody tr:last-child td { border-bottom: 0; }
.arac-cubugu { margin-bottom: 20px; gap: 12px; }
.arac-cubugu input[type=search] { border-color: transparent; background: var(--yuzey2); border-radius: 10px; }
.ust-bilgi { margin: -18px 0 22px; }
.tablo-kap { border-radius: var(--r); }

/* Apple katmanı · üçüncü tur: besleme, kanal takibi, ince ayrıntılar */
.ince-ayrinti { font-size: 13px; color: var(--soluk); margin: 0 0 14px; }
.ince-ayrinti > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; color: var(--soluk); font-weight: 550; border-radius: 8px; padding: 2px 0; }
.ince-ayrinti > summary::-webkit-details-marker { display: none; }
.ince-ayrinti > summary::after { content: "›"; font-size: 15px; transition: transform .3s var(--yay); display: inline-block; }
.ince-ayrinti[open] > summary::after { transform: rotate(90deg); }
.ince-ayrinti > summary:hover { color: var(--metin); }
.ince-ayrinti > p, .ince-ayrinti > .olay { margin: 8px 0 0; line-height: 1.5; max-width: 820px; animation: belir .3s var(--yay) both; }
.ince-ayrinti.satir-ici { margin: 0; }
.ince-ayrinti.satir-ici > summary b { color: var(--metin); font-size: 13.5px; }
.ince-ayrinti.satir-ici > p { white-space: normal; font-weight: 400; }
.tablo-kap.duz { box-shadow: none; background: transparent; border-radius: 0; margin: 0 -14px; }
.tablo-kap.duz .veri th { background: transparent; backdrop-filter: none; }
.aciklama { color: var(--soluk); }
table.takip tr.takip-bas td { background: transparent; padding-top: 22px; border-bottom-color: var(--cizgi2); }
table.takip td { padding-top: 10px; padding-bottom: 10px; }
/* Ajans ve Portföy tablolarında uzun hücre metni iki satırda kalır, üstüne gelince açılır */
.veri td { overflow-wrap: anywhere; }

/* Eğilim grafiği (plan 3.2) — kütüphanesiz SVG, renkler tema değişkeninden, koyu görünümde kendiliğinden döner. */
.egilim { margin: 12px 0 0; background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge); padding: 14px 16px 8px; animation: belir .42s var(--yay) both; }
.egilim-kap { margin: 8px 0 24px; }
.egilim-kap h2 { margin: 0 0 4px; }
.eg-ust { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--metin2); margin-bottom: 6px; }
.eg-lejant { display: inline-flex; align-items: center; gap: 6px; }
.eg-lejant i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.eg-lejant i.l-ciro { height: 10px; width: 8px; background: var(--cizgi2); }
.eg-lejant i.l-mer { background: var(--vurgu); }
.eg-lejant i.l-roas { background: var(--orta); }
.egilim svg { display: block; width: 100%; height: auto; overflow: visible; }
.eg-zemin { fill: transparent; }
.eg-gun:hover .eg-zemin { fill: color-mix(in srgb, var(--metin) 5%, transparent); }
.eg-gun.eksik .eg-zemin { fill: url(#egTarama); }
.eg-tarama { stroke: var(--cizgi); stroke-width: 1.5; }
.eg-cubuk { fill: var(--cizgi2); transition: fill .2s var(--yay); }
.eg-cubuk.son, .eg-gun:hover .eg-cubuk { fill: color-mix(in srgb, var(--vurgu) 55%, var(--cizgi2)); }
.eg-taban { stroke: var(--cizgi); stroke-width: 1; }
.eg-esik { stroke-width: 1; stroke-dasharray: 4 4; opacity: .8; }
.eg-esik.kotu { stroke: var(--kotu); } .eg-esik.iyi { stroke: var(--iyi); }
.eg-mer, .eg-roas { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.eg-mer { stroke: var(--vurgu); } .eg-roas { stroke: var(--orta); stroke-width: 1.6; opacity: .85; }
.eg-mer-n { fill: var(--vurgu); } .eg-roas-n { fill: var(--orta); }
.eg-etiket { font: 500 11px var(--font-govde); fill: var(--soluk); font-variant-numeric: tabular-nums; }
.eg-etiket.kotu { fill: var(--kotu); } .eg-etiket.iyi { fill: var(--iyi); }
@media (prefers-reduced-motion: reduce) { .egilim { animation: none; } }

/* Maliyet kalemleri — gruplar iki sütun, satır kısa, kaynak tıklayınca açılır. */
.maliyet-gruplar { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px 20px; margin-top: 28px; }
.maliyet-grup h3 { margin: 12px 0 2px; font-size: 15px; }
.maliyet-grup .kanal-liste { margin-top: 8px; }
.maliyet-satir + .maliyet-satir { border-top: 1px solid var(--cizgi); }
.maliyet-satir summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; gap: 14px; align-items: center; padding: 12px 18px; cursor: pointer; list-style: none; transition: background .2s var(--yay); }
.maliyet-satir summary::-webkit-details-marker, .maliyet-urun summary::-webkit-details-marker { display: none; }
.maliyet-satir summary:hover { background: color-mix(in srgb, var(--yuzey2) 55%, transparent); }
.m-ad { font-size: 14px; min-width: 0; }
.m-deger { font: 600 15px var(--font-baslik); font-variant-numeric: tabular-nums; white-space: nowrap; }
.maliyet-satir .ok, .maliyet-urun .ok { color: var(--soluk); font-size: 17px; transition: transform .3s var(--yay); justify-self: end; }
.maliyet-satir[open] .ok, .maliyet-urun[open] .ok { transform: rotate(90deg); }
.m-ayrinti { padding: 0 18px 14px; font-size: 13.5px; animation: belir .3s var(--yay) both; }
.m-ayrinti p { margin: 0 0 4px; }
.maliyet-urun { margin-top: 12px; }
.maliyet-urun > summary { display: flex; align-items: baseline; gap: 12px; padding: 12px 4px; cursor: pointer; list-style: none; }
.maliyet-urun > summary .ok { margin-left: auto; }
.maliyet-tablo tbody tr { cursor: default; }
.m-oran { position: relative; min-width: 96px; }
.m-cubuk { display: inline-block; vertical-align: middle; width: 44px; height: 4px; border-radius: 2px; margin-right: 8px; background: linear-gradient(90deg, var(--vurgu) var(--w), var(--cizgi) var(--w)); }

/* Ürün kârı — satıştan tahmini kâra akış, satır başına çubuk net satışa oranla. */
.sel-kart { background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge); padding: 6px 0; animation: belir .4s var(--yay) both; }
.sel-satir { display: grid; grid-template-columns: minmax(170px, 260px) minmax(0, 1fr) 130px 64px; gap: 16px; align-items: center; padding: 9px 22px; }
.sel-ad { font-size: 14px; display: flex; flex-direction: column; }
.sel-ad small { color: var(--soluk); font-size: 11.5px; }
.sel-satir b { font: 600 15.5px var(--font-baslik); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sel-yz { font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.sel-cubuk { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--cizgi) 60%, transparent); overflow: hidden; }
.sel-cubuk i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--cizgi2); }
.sel-satir.arti .sel-cubuk i { background: var(--vurgu); }
.sel-satir.eksi b { color: var(--metin2); font-weight: 500; }
.sel-satir.ara { border-top: 1px solid var(--cizgi); }
.sel-satir.ara .sel-cubuk i { background: color-mix(in srgb, var(--vurgu) 55%, var(--cizgi2)); }
.sel-satir.son { border-top: 1px solid var(--cizgi2); }
.sel-satir.son .sel-ad { font-weight: 650; }
.sel-satir.son b { font-size: 19px; }
.sel-satir.son .sel-cubuk i { background: var(--iyi); }
.kucuk-seg button { font-size: 12.5px; padding-inline: 10px; }
.uk-pay { min-width: 120px; }
.uk-cubuk { display: block; height: 6px; border-radius: 3px; width: var(--w); background: var(--vurgu); opacity: .75; }
.uk-cubuk.eksi { background: var(--kotu); }
tr.zarar td { color: var(--kotu); }
@media (max-width: 760px) { .sel-satir { grid-template-columns: minmax(0, 1fr) 110px 52px; } .sel-cubuk { display: none; } }

/* Paketler — satır: ad | maliyet | fiyat | indirim; içerik çipleri tıklayınca. */
.paket-satir summary { grid-template-columns: minmax(0, 1fr) 96px 96px 104px 14px; }
.paket-olcu { display: flex; flex-direction: column; align-items: flex-end; }
.paket-olcu small { color: var(--soluk); font-size: 11px; }
.paket-olcu b { font: 600 14.5px var(--font-baslik); font-variant-numeric: tabular-nums; white-space: nowrap; }
.paket-icerik { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.cip { font-size: 12.5px; background: var(--yuzey2); color: var(--metin2); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
@media (max-width: 760px) { .paket-satir summary { grid-template-columns: minmax(0, 1fr) 84px 14px; } .paket-satir .paket-olcu:nth-of-type(3), .paket-satir .paket-olcu:nth-of-type(4) { display: none; } }

/* Bugün › kanal şeridi (3.3): kart başına faz · sıradaki · ölçüm · yaş */
.kd-satir { display: grid; grid-template-columns: 150px minmax(0, 1.1fr) minmax(0, 1.3fr) 150px 64px; align-items: start; gap: 16px; padding: 14px 20px; cursor: pointer; transition: background .2s var(--yay); }
.kd-satir + .kd-satir { border-top: 1px solid var(--cizgi); }
.kd-satir:hover { background: color-mix(in srgb, var(--yuzey2) 55%, transparent); }
.kd-satir > span { min-width: 0; display: block; font-size: 13.5px; line-height: 1.45; }
.kd-ad b { display: block; font-weight: 600; font-size: 14.5px; }
.kd-ad small, .kd-sonraki small, .kd-olcum small { display: block; color: var(--soluk); font-size: 11.5px; letter-spacing: .04em; }
.kd-faz, .kd-sonraki { color: var(--metin2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kd-olcum b { display: block; font: 600 17px/1.2 var(--font-baslik); font-variant-numeric: tabular-nums; margin-top: 2px; }
.kd-olcum i { font-style: normal; color: var(--soluk); font-size: 12px; }
.kd-yas { justify-self: end; text-align: right; }
@media (max-width: 900px) {
  .kd-satir { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .kd-faz, .kd-sonraki, .kd-olcum { grid-column: 1 / -1; }
}

/* Yenile düğmesi (18 Eylül): dönen ikon, çalışırken tıklanamaz */
.yenile-dug { white-space: nowrap; }
.yenile-dug.doner { opacity: .75; }
.yenile-dug.doner::first-letter { display: inline-block; animation: yenile-don 1s linear infinite; }
@keyframes yenile-don { to { transform: rotate(360deg); } }

/* Yapılacaklar panosu (18 Eylül): Trello tarzı listeler + rutinler */
.yp-tahta { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 8px; align-items: start; }
.yp-liste { background: var(--yuzey2); border-radius: var(--r); padding: 12px; min-height: 120px; transition: background .2s var(--yay), box-shadow .2s var(--yay); }
.yp-liste.uzerinde { background: color-mix(in srgb, var(--vurgu) 12%, var(--yuzey2)); box-shadow: inset 0 0 0 2px var(--vurgu); }
.yp-liste header { display: flex; align-items: baseline; gap: 8px; margin: 2px 4px 10px; }
.yp-liste h3 { margin: 0; font-size: 14px; letter-spacing: .01em; }
.yp-kartlar { display: flex; flex-direction: column; gap: 8px; min-height: 8px; }
.yp-kart { background: var(--yuzey); border-radius: 10px; box-shadow: var(--golge); padding: 10px 12px; cursor: grab; }
.yp-kart:active { cursor: grabbing; }
.yp-kart-ust { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; }
.yp-kart-ust b { font-weight: 550; font-size: 14px; line-height: 1.4; cursor: pointer; }
.yp-kart .yp-alt { display: flex; gap: 8px; align-items: center; margin: 8px 0 0 28px; }
.yp-duzen { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.yp-duzen textarea, .yp-duzen input { width: 100%; }
.yp-duzen-satir { display: flex; gap: 8px; flex-wrap: wrap; }
.yp-duzen-satir input[type="date"] { width: auto; }
.yp-ekle { width: 100%; margin-top: 10px; background: transparent; border-style: dashed; }
.yp-rutinler { margin-top: 40px; }
.yp-rutin-liste { background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge); overflow: hidden; }
.yp-rutin { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.yp-rutin + .yp-rutin { border-top: 1px solid var(--cizgi); }
.yp-rutin b { font-weight: 550; font-size: 14.5px; flex: none; }
.yp-rutin .bosluk, .yp-rutin .rozet { margin-left: auto; }
.yp-rutin button { margin-left: 8px; }
.yp-rutin-ekle { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.yp-rutin-ekle input { flex: 1 1 240px; }
.yp-serit { display: flex; align-items: center; gap: 14px; background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge); padding: 14px 18px; margin: 18px 0 6px; color: inherit; text-decoration: none; transition: transform .2s var(--yay); }
.yp-serit:hover { transform: translateY(-1px); }
.yp-serit .ok { margin-left: auto; color: var(--soluk); font-size: 18px; }
.yp-serit span { font-size: 13.5px; }

/* Ghost'a sor (18 Eylül): panelden kısa tur */
.sh-akis { display: flex; flex-direction: column; gap: 14px; background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge); padding: 20px; max-height: 58vh; overflow: auto; }
.sh-mesaj { display: flex; flex-direction: column; gap: 4px; max-width: 74ch; }
.sh-mesaj.ben { align-self: flex-end; text-align: right; }
.sh-mesaj.ben .md { background: var(--vurgu-acik); border-radius: 12px 12px 4px 12px; padding: 10px 14px; }
.sh-mesaj.ghost .md { background: var(--yuzey2); border-radius: 12px 12px 12px 4px; padding: 10px 14px; }
.sh-mesaj.hatali .md { background: color-mix(in srgb, var(--kotu) 14%, var(--yuzey2)); }
.sh-mesaj .md p:first-child { margin-top: 0; } .sh-mesaj .md p:last-child { margin-bottom: 0; }
.sh-kim { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); }
.sh-mesaj.bekliyor .soluk { font-style: italic; }
.sh-kutu { display: flex; gap: 10px; align-items: flex-end; margin-top: 14px; }
.sh-kutu textarea { flex: 1; resize: vertical; }
.kart-notlari { margin-top: 32px; background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge); padding: 18px 22px 6px; }
.kart-notlari h2 { font-size: 16px; margin: 0 0 4px; }

/* Aylık gidişat (18 Eylül) */
.pl-cubuk { display: inline-block; width: var(--w); height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--vurgu) 45%, transparent); margin-right: 8px; vertical-align: middle; }
.pl-donem { background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge); padding: 16px 20px; margin-top: 14px; }
.pl-donem summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; }
.pl-iki { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 12px; }
.pl-iki h3 { font-size: 14px; margin: 0 0 6px; }
.pl-notlar { margin: 14px 0 4px; padding-left: 18px; color: var(--metin2); font-size: 13.5px; }
.pl-notlar li { margin: 4px 0; }

/* GMP — 90 günlük protokol (18 Eylül): Yapılacaklar sayfasının başı + portföy şeridi */
.gmp { background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge); padding: 18px 22px 16px; margin: 18px 0 22px; }
.gmp .bolum-bas { margin: 0 0 10px; }
.gmp-sayilar { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.gmp-cubuk { height: 6px; border-radius: 3px; background: var(--yuzey2); overflow: hidden; margin: 2px 0 14px; }
.gmp-cubuk i { display: block; height: 100%; background: var(--vurgu); border-radius: 3px; }
.gmp-gorevler { display: grid; gap: 8px; }
.gmp-gorev { display: grid; grid-template-columns: minmax(200px, max-content) 1fr; align-items: baseline; gap: 6px 14px; padding: 9px 12px; border: 1px solid var(--cizgi); border-radius: 10px; }
.gmp-kutu { display: flex; align-items: baseline; gap: 10px; cursor: pointer; }
.gmp-mat { font-size: 13px; color: var(--metin2); min-width: 0; }
.gmp-mat summary { cursor: pointer; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gmp-mat[open] summary { white-space: normal; margin-bottom: 6px; }
.gmp-mat pre { white-space: pre-wrap; word-break: break-word; margin: 0; font: inherit; background: var(--yuzey2); border-radius: 8px; padding: 10px 12px; max-height: 44vh; overflow: auto; }
.gmp-gorev:hover { border-color: var(--cizgi2); }
.gmp-gorev.tamam { background: color-mix(in srgb, var(--iyi, #2E7D32) 8%, var(--yuzey)); border-color: color-mix(in srgb, var(--iyi, #2E7D32) 26%, var(--cizgi)); }
.gmp-gorev.tamam .gmp-ad { text-decoration: line-through; color: var(--soluk); }
.gmp-ad { font-weight: 600; font-size: 14px; }
.gmp-uyari { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: color-mix(in srgb, var(--kotu) 12%, var(--yuzey)); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; }
.gmp-uyari.bitti { background: color-mix(in srgb, var(--iyi, #2E7D32) 12%, var(--yuzey)); }
.gmp-not { margin: 12px 0 0; }
.yp-serit.uyari { box-shadow: 0 0 0 1px color-mix(in srgb, var(--kotu) 45%, transparent), var(--golge); }

/* Setler (18 Eylül): çalışma/mola sayacı */
.set-kart { background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge); padding: 24px 26px; margin: 18px 0 26px; text-align: center; }
.set-kart.mola { background: color-mix(in srgb, var(--iyi, #2E7D32) 7%, var(--yuzey)); }
.set-durum { font-weight: 600; font-size: 15px; }
.set-saat { font: 600 clamp(56px, 11vw, 104px)/1.05 var(--font-baslik); font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin: 10px 0 12px; }
.set-saat.bosta { color: var(--soluk); }
.set-saat.asti { color: var(--kotu); }
.set-cubuk { height: 6px; border-radius: 3px; background: var(--yuzey2); overflow: hidden; margin: 0 auto 16px; max-width: 520px; }
.set-cubuk i { display: block; height: 100%; width: 0; background: var(--vurgu); transition: width 1s linear; }
.set-kart textarea#setNot { width: 100%; max-width: 620px; display: block; margin: 0 auto 14px; resize: vertical; text-align: left; }
.set-dugmeler { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.set-ayarlar { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.set-ayar-kutu { border: 1px solid var(--cizgi); border-radius: 12px; padding: 12px 16px; min-width: 220px; }
.set-ayar-ad { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); font-weight: 600; margin-bottom: 8px; }
.set-ayar-satir, .set-sure { display: flex; align-items: center; justify-content: center; gap: 8px; }
.set-ayar-satir input, .set-sure input { width: 64px; text-align: center; font-size: 17px; font-variant-numeric: tabular-nums; }
.set-sure { margin: 0 0 14px; font-size: 13.5px; color: var(--metin2); }
.set-hazir { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.set-hazir button { border: 1px solid var(--cizgi); background: transparent; color: inherit; border-radius: 999px; padding: 3px 11px; font: inherit; font-size: 12.5px; cursor: pointer; }
.set-hazir button:hover { border-color: var(--cizgi2); }
.set-hazir button.secili { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.set-liste h2 { font-size: 17px; margin: 0 0 8px; }
.set-tablo { width: 100%; border-collapse: collapse; background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge); overflow: hidden; }
.set-tablo th, .set-tablo td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--cizgi); vertical-align: top; font-size: 13.5px; }
.set-tablo th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); font-weight: 600; }
.set-tablo td:first-child { width: 36px; } .set-tablo td:nth-child(2) { width: 110px; white-space: nowrap; } .set-tablo td:nth-child(3) { width: 130px; }
.set-tablo tr.set-mola td { color: var(--soluk); }
.set-tablo td:last-child { width: 36px; text-align: right; }
.set-not-satir { width: 100%; resize: vertical; min-height: 30px; font: inherit; }

/* Setler etiketleri + dağılım + kapanış (18 Eylül) */
.set-etiketler { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 0 0 14px; }
.set-etiketler button { border: 1px solid var(--cizgi); background: transparent; color: inherit; border-radius: 999px; padding: 5px 13px; font: inherit; font-size: 13px; cursor: pointer; }
.set-etiketler button:hover { border-color: var(--cizgi2); }
.set-etiketler button.secili { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.set-etiket-sec { font: inherit; font-size: 12.5px; max-width: 130px; }
.set-ozetler { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 26px 0 18px; }
.set-dagilim { background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge); padding: 14px 18px; }
.set-dagilim-bas { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.set-dagilim-satir { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; font-size: 13px; margin: 5px 0; }
.set-dagilim-cubuk { height: 6px; border-radius: 3px; background: var(--yuzey2); overflow: hidden; }
.set-dagilim-cubuk i { display: block; height: 100%; background: var(--vurgu); }
.set-etiket-duzen, .set-dun { background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge); padding: 12px 18px; margin: 0 0 14px; }
.set-etiket-duzen summary, .set-dun summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.set-etiket-satir { display: flex; gap: 8px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.set-etiket-satir input { flex: 1; min-width: 160px; }
.set-zaman { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.set-dun .md h1 { font-size: 17px; margin: 12px 0 8px; }
.set-dun .md h2 { font-size: 14.5px; margin: 14px 0 6px; }
.set-dun .md { font-size: 13.5px; }

/* Notlar — anlık not (anlik_not.py) */
.anl-kart { display: flex; gap: 22px; align-items: center; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 22px 24px; margin: 8px 0 18px; }
.anl-kayit { width: 88px; height: 88px; flex: none; border-radius: 50%; border: 0; cursor: pointer; background: var(--metin); color: var(--kagit); font-size: 34px; display: grid; place-items: center; box-shadow: 0 4px 14px rgb(0 0 0 / .18); transition: transform .12s, background .2s; }
.anl-kayit:hover { transform: scale(1.04); }
.anl-kayit.kayitta { background: var(--kirmizi); color: #fff; animation: anl-nabiz 1.4s ease-in-out infinite; }
@keyframes anl-nabiz { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kirmizi) 45%, transparent); } 50% { box-shadow: 0 0 0 14px transparent; } }
.anl-yan { flex: 1; min-width: 0; display: grid; gap: 8px; }
.anl-durum { font-size: 16px; }
.anl-yaz { display: flex; gap: 8px; margin-top: 4px; }
.anl-yaz input { flex: 1; min-width: 0; font: inherit; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--cizgi2); background: var(--zemin); color: var(--metin); }
.anl-bekle { padding: 10px 14px; border-radius: var(--r); background: var(--amber-acik); color: var(--amber); margin-bottom: 14px; font-size: 13.5px; }
.anl-gun { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--soluk); margin: 22px 0 8px; font-family: var(--font-govde); }
.anl-not { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 14px 18px; margin-bottom: 10px; }
.anl-not.tamam { opacity: .6; }
.anl-ust { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--soluk); margin-bottom: 6px; }
.anl-metin { font-size: 15.5px; line-height: 1.5; white-space: pre-wrap; }
.anl-not audio { width: 100%; height: 32px; margin-top: 10px; }
@media (max-width: 600px) { .anl-kart { flex-direction: column; text-align: center; } .anl-yaz { flex-direction: column; } }

/* Telefon (18 Eylül, Tailscale üzerinden Peak): menü kaydırılır, ızgaralar tek sütun, tablolar kendi içinde kayar.
   Ölçü: hiçbir sayfa 375 px'te yatay taşmamalı (document.scrollWidth === innerWidth). */
@media (max-width: 700px) {
  html, body { overflow-x: hidden; }
  .bas { padding-top: env(safe-area-inset-top); }
  .bas-ic { flex-wrap: wrap; height: auto; padding: 8px 14px 0; gap: 6px 10px; }
  .logo { font-size: 17px; }
  .bas-sag { gap: 6px; }
  .bas-sag .marka-sec { max-width: 130px; }
  .komut-dugme kbd { display: none; }
  .ana-menu { order: 3; flex: 1 0 100%; height: auto; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: 0 10px; }
  .ana-menu::-webkit-scrollbar, .alt-menu::-webkit-scrollbar { display: none; }
  .ana-menu a { white-space: nowrap; margin: 6px 0 8px; padding: 6px 11px; font-size: 14px; }
  .alt-menu { padding: 2px 14px 10px; scrollbar-width: none; }
  .sayfa { padding: 18px 14px 110px; }
  h1 { font-size: 30px; }
  .bolum-bas { flex-direction: column; align-items: stretch; gap: 12px; }
  .kartlar, .kartlar.portfoy, .hooklar, .iki, .karar-izgara, .donemler, .rakamlar { grid-template-columns: minmax(0, 1fr); }
  .serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sayilar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kartlar.portfoy .tanim td:first-child { width: 105px; }
  .olay { grid-template-columns: 84px minmax(0, 1fr); }
  .iki { gap: 24px; margin-top: 24px; }
  .sayfa table:not(.tanim) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sayfa pre, .sayfa .md { overflow-x: auto; max-width: 100%; }
  input, select, textarea { font-size: 16px; } /* iOS odakta yakınlaştırmasın */
  dialog { max-width: calc(100vw - 24px); }
  .kaydet-cubugu { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  .yp-serit { flex-wrap: wrap; gap: 6px 10px; padding: 12px 14px; }
  .yp-serit > * { min-width: 0; }
  .yp-serit .ok { position: absolute; right: 14px; }
  .yp-serit { position: relative; padding-right: 34px; }
  .yp-rutin { flex-wrap: wrap; }
}

/* Her sayfada sağ alttaki mikrofon (MIK, app.js) */
.mik-dugme { position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 40; min-width: 56px; height: 56px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer; background: var(--metin); color: var(--kagit); font-size: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 20px rgb(0 0 0 / .22); transition: transform .12s, background .2s; }
.mik-dugme:hover { transform: scale(1.05); }
.mik-dugme.kayitta { background: var(--kirmizi); color: #fff; animation: anl-nabiz 1.4s ease-in-out infinite; }
.mik-kare { width: 14px; height: 14px; border-radius: 3px; background: #fff; }
.mik-kare.buyuk { width: 26px; height: 26px; border-radius: 6px; }
.mik-svg { display: block; flex: none; }
.anl-ikon { display: grid; place-items: center; }
.mik-sure { font: 600 15px var(--font-govde); font-variant-numeric: tabular-nums; }
.kaydet-cubugu:not([hidden]) ~ .mik-dugme { bottom: calc(84px + env(safe-area-inset-bottom)); }

/* ---------- teklif tablosu (19 Eylül) ---------- */
.tk-grup { margin: 26px 0 8px; font-size: 15px; display: flex; gap: 8px; align-items: baseline; }
.tk-tablo .veri td { white-space: nowrap; }
.tk-tablo .veri td.sabit { white-space: normal; min-width: 260px; max-width: 340px; }
.tk-tablo .veri td:last-child { min-width: 200px; max-width: 280px; white-space: normal; }
.tk-testler { display: flex; flex-direction: column; gap: 16px; }
.tk-test-kart { padding: 18px 20px; }
.tk-dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px 14px; margin: 12px 0 0; font-size: 14px; }
.tk-dl dt { color: var(--soluk); font-size: 12.5px; padding-top: 2px; }
.tk-dl dd { margin: 0; }
.tk-hs tbody tr { cursor: default; }
.tk-hs tr.tk-ort td { background: var(--yuzey2); }
.tk-hs tr.tk-test td { border-top: 2px solid var(--cizgi2); }
.tk-form .tk-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tk-form .tk-uc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tk-onizleme { background: var(--yuzey); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--golge); position: sticky; top: -18px; z-index: 3; }
.tk-on-ust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.tk-on-ust > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tk-on-ust small { font-size: 11.5px; color: var(--soluk); }
.tk-on-ust b { font-size: 18px; font-variant-numeric: tabular-nums; }
.tk-alt-bas { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.tk-hediye { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px 32px; gap: 6px; margin-bottom: 6px; }
@media (max-width: 700px) { .tk-on-ust { grid-template-columns: 1fr 1fr; } .tk-form .tk-uc { grid-template-columns: 1fr; } .tk-dl { grid-template-columns: 1fr; } }

/* Bugün › kreatif hızı (19 Eylül) */
.kh-satir { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--yuzey); cursor: pointer; }
.kh-satir:hover { border-color: var(--cizgi2); }
.kh-hafta { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kh-hafta + .kh-hafta { border-left: 1px solid var(--cizgi); }
.kh-hafta.bu { background: color-mix(in srgb, var(--yuzey2) 55%, transparent); }
.kh-hafta b.rozet { align-self: flex-start; font-size: 18px; padding: 2px 10px; }
@media (max-width: 760px) { .kh-satir { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kh-hafta + .kh-hafta { border-left: 0; border-top: 1px solid var(--cizgi); } }

/* Sistem sağlığı şeridi (Portföy, 19 Eylül) — details: kapalıyken tek satır, açınca kontrol tablosu */
details.yp-serit.saglik { display: block; cursor: pointer; }
details.yp-serit.saglik > summary { display: flex; align-items: center; gap: 14px; list-style: none; }
details.yp-serit.saglik > summary::-webkit-details-marker { display: none; }
details.yp-serit.saglik[open] .ok { transform: rotate(90deg); }
details.yp-serit.saglik:hover { transform: none; }
.saglik-tablo { width: 100%; margin-top: 12px; font-size: 13px; cursor: default; }
.saglik-tablo td { padding: 5px 8px 5px 0; vertical-align: top; }
.saglik-tablo td:first-child { width: 1%; white-space: nowrap; }
@media (max-width: 760px) { details.yp-serit.saglik > summary { flex-wrap: wrap; gap: 6px 10px; } .saglik-tablo td:last-child { display: block; padding-top: 0; } }

/* hedef yolu + simülatör (g23, 19 Eylül) */
.hy .hy-yol { fill: none; stroke: var(--iyi); stroke-width: 2; stroke-dasharray: 5 4; }
.hy .hy-hiz { fill: none; stroke: var(--vurgu); stroke-width: 2.2; }
.hy .hy-yol-n { fill: var(--iyi); }
.hy .hy-hiz-n { fill: var(--vurgu); }
.hy-l-yol, .hy-l-hiz { display: inline-block; width: 14px; height: 0; vertical-align: middle; margin-right: 6px; }
.hy-l-yol { border-top: 2px dashed var(--iyi); }
.hy-l-hiz { border-top: 2px solid var(--vurgu); }
.sim-girdi { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; margin: 6px 0 14px; }
.sim-girdi label { display: flex; flex-direction: column; gap: 4px; }
.sim-girdi label small { color: var(--soluk); font-size: 12px; }
.sim-girdi label span { display: flex; align-items: center; gap: 6px; }
.sim-girdi input { width: 100%; min-width: 0; font: inherit; font-variant-numeric: tabular-nums; padding: 7px 9px; border: 1px solid var(--cizgi2); border-radius: 8px; background: transparent; color: inherit; }
.sim-girdi i { font-style: normal; color: var(--soluk); font-size: 13px; }
.sim table.veri { margin-top: 12px; }
tr.vurgulu td { font-weight: 600; }
td.iyi { color: var(--iyi); }
td.kotu { color: var(--kotu); }

/* ---------- Kreatif Stüdyosu ---------- */
.st-hedef { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px; padding: 12px 14px; margin: 10px 0 14px; }
.st-hedef > div + div { margin-top: 6px; }
.st-cubuk { height: 6px; background: var(--yuzey2); border-radius: 999px; overflow: hidden; }
.st-cubuk span { display: block; height: 100%; background: var(--vurgu); }
.st-kova { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 12.5px; }
.st-kova .kv.sapma b { color: var(--amber); }
.st-serit { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.st-arac { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.st-arac .girdi { min-width: 180px; }
.st-arac .girdi.genis { flex: 1; min-width: 240px; }
.st-toplu { display: flex; gap: 8px; align-items: center; background: var(--vurgu-acik); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.st-tablo td { vertical-align: top; }
.st-tablo tbody tr { cursor: pointer; }
.st-tablo tbody tr:hover { background: var(--yuzey); }
.st-tablo tbody tr.secili { background: var(--vurgu-acik); }
.st-tablo td.dar, .st-tablo th.dar { width: 1%; white-space: nowrap; }
.st-ad { font-weight: 550; }
.rozet.mini { font-size: 10.5px; padding: 0 6px; }
.rozet.d-fikir { background: var(--yuzey2); }
.rozet.d-brief, .cip.d-brief { background: var(--amber-acik); color: var(--amber); }
.rozet.d-onay, .cip.d-onay { background: var(--vurgu-acik); color: var(--vurgu); }
.rozet.d-uretim { background: var(--vurgu-acik); color: var(--vurgu); }
.rozet.d-raf { background: var(--yuzey2); color: var(--metin2); }
.rozet.d-yayin { background: var(--vurgu); color: var(--vurgu-ust); }
.rozet.d-olcum { background: var(--amber); color: #fff; }
.rozet.d-kapandi { background: var(--yuzey2); color: var(--soluk); }
.st-kart { border: 1px solid var(--cizgi2); border-radius: 14px; background: var(--yuzey); margin-top: 16px; padding: 16px; }
.st-kart-bas { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.st-kart-bas .bas-sag { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.baslik-girdi { font: 600 19px var(--font-baslik); border: none; background: transparent; color: var(--metin); width: 100%; padding: 2px 0; }
.baslik-girdi:focus { outline: none; border-bottom: 1px solid var(--cizgi2); }
.st-kapi { background: var(--amber-acik); color: var(--amber); border-radius: 10px; padding: 8px 12px; margin-top: 10px; font-size: 13px; }
.st-ust { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 14px 0; }
.st-alan { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--soluk); }
.st-alan.genis { grid-column: 1 / -1; }
.st-alan .girdi, .st-kart .girdi { width: 100%; }
.st-kaynak { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; border-left: 3px solid var(--vurgu); padding-left: 12px; }
.st-sekme { display: flex; gap: 4px; border-bottom: 1px solid var(--cizgi); margin-bottom: 12px; }
.st-sekme button { background: none; border: none; border-bottom: 2px solid transparent; padding: 7px 14px; font: 500 14px var(--sans); color: var(--soluk); cursor: pointer; }
.st-sekme button.aktif { color: var(--metin); border-bottom-color: var(--vurgu); }
.st-govde details { border-top: 1px solid var(--cizgi); padding: 8px 0; }
.st-govde summary { cursor: pointer; font-weight: 550; font-size: 13.5px; padding: 4px 0; }
.st-abg-kap { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; }
.st-abg { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.st-abg i { display: block; font-style: normal; font-size: 11.5px; }
.st-hooklar { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.st-hook { border: 1px solid var(--cizgi); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; background: var(--kagit); }
.st-hook-bas { display: flex; gap: 6px; align-items: center; }
.st-hook-bas .girdi.kucuk { font-size: 12px; padding: 3px 6px; }
.st-kriter { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--soluk); }
.st-ses-kap { margin-top: 8px; border: 1px dashed var(--cizgi); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--kagit); }
.st-ses-kap .st-rev-bas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.st-ses { display: flex; flex-direction: column; gap: 3px; }
.st-ses audio { width: 100%; max-width: 560px; height: 36px; }
.st-rev-kap { margin-top: 8px; border: 1px dashed var(--cizgi); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--kagit); }
.st-rev-bas { font-size: 13px; }
.st-rev-form { display: flex; gap: 6px; align-items: center; }
.st-rev-form .girdi { flex: 1; }
.st-rev { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; border-left: 3px solid var(--amber); padding: 4px 0 4px 10px; font-size: 13px; }
.st-rev q { display: block; font-family: var(--serif); color: var(--soluk); font-style: italic; margin-bottom: 2px; }
.st-rev.islendi { border-left-color: var(--cizgi); opacity: .7; }
.st-rev-eski summary { cursor: pointer; }
.st-dogr { display: grid; grid-template-columns: 180px 1fr 110px; gap: 8px; align-items: center; margin-bottom: 6px; }
.st-dogr.acik { border-left: 3px solid var(--amber); padding-left: 8px; }
.st-kontrol-satir { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--cizgi); }
.st-kontrol-satir i { font-style: normal; display: block; font-size: 12px; }
.st-kanit li { margin-bottom: 4px; font-size: 13px; }
.st-kanit li.belge { color: var(--vurgu); }
.st-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.st-cekim li { font-size: 13px; margin-bottom: 4px; }
.st-olcu { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 8px; }
.st-olcu b { display: block; font: 600 17px var(--font-baslik); }
@media (max-width: 800px) { .st-iki, .st-dogr { grid-template-columns: 1fr; } }

/* Bugün › yeni reklam başlığı (23 Eylül): son yeni reklam + bu hafta yayına giren, sayfanın en üstünde tek satır */
.kpi-bant { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge); padding: 12px 18px; margin: 0 0 18px; }
.kpi-bant .kb-oge { font-size: 14.5px; color: var(--metin2); }
.kpi-bant .kb-oge b { font: 650 17px/1.3 var(--font-baslik); letter-spacing: -.01em; color: var(--metin); }
.kpi-bant .kb-oge b.iyi { color: var(--yesil); } .kpi-bant .kb-oge b.orta { color: var(--amber); } .kpi-bant .kb-oge b.kotu { color: var(--kirmizi); }
.kpi-bant .bosluk { flex: 1; }
@media (max-width: 600px) { .kpi-bant .bosluk { display: none; } }

/* Yapılacaklar › kartın ayrıntısı (not): açık kartta satır sonlarıyla, kapalıda tek rozet */
.yp-not { white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; color: var(--metin2); background: var(--yuzey2); border-radius: 8px; padding: 8px 10px; margin: 8px 0 0 28px; overflow-wrap: anywhere; }
.yp-duzen textarea.yp-not-alan { font-size: 13px; line-height: 1.45; white-space: pre-wrap; }

/* Bölüm sekmeleri (25 Eylül): Stüdyo ve Kütüphane üstünde — Statik › Üst · Alt funnel, Video › İterasyon · İmitasyon · İdeasyon */
.st-bolum, .ktp-bolum { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--cizgi); }
.bolum-grup { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-left: 10px; border-left: 1px solid var(--cizgi2); }
.bolum-grup-ad { font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); background: none; border: none; padding: 4px 2px; cursor: pointer; }
.bolum-grup-ad:hover, .bolum-grup-ad.aktif { color: var(--vurgu); }
.cip.bolumsuz:not(.aktif) { border-style: dashed; color: var(--soluk); }
.cip b { font-weight: 650; font-variant-numeric: tabular-nums; }

/* Kreatif kütüphanesi + ilham kütüphanesi (25 Eylül): kart kart ızgara, süzgeç, tek kart sayfası */
.ktp-not { font-size: 12px; color: var(--soluk); align-self: flex-end; }
.ktp-uyari { background: var(--amber-acik); color: var(--amber); border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; font-size: 13px; }
.ktp-arac { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.ktp-arac #ktpAra { flex: 1 1 240px; min-width: 0; }
.ktp-suz { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ktp-cipler { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ktp-suz-ad { font: 600 11.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); min-width: 70px; }
.cip.sifir:not(.aktif) { opacity: .55; }
.cip.s-kazanan::before, .cip.s-kaybeden::before, .cip.s-izlemede::before, .cip.s-olculmedi::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 2px; background: var(--soluk); }
.cip.s-kazanan::before { background: var(--iyi); } .cip.s-kaybeden::before { background: var(--kotu); } .cip.s-izlemede::before { background: var(--orta); }
.ktp-menuler { display: flex; flex-wrap: wrap; gap: 6px; }
.ktp-menu { position: relative; }
.ktp-menu > summary { list-style: none; cursor: pointer; font-size: 12.5px; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--cizgi2); color: var(--metin2); background: var(--yuzey); white-space: nowrap; }
.ktp-menu > summary::-webkit-details-marker { display: none; }
.ktp-menu > summary::after { content: " ▾"; color: var(--soluk); }
.ktp-menu.dolu > summary { border-color: var(--vurgu); color: var(--vurgu); }
.ktp-menu-liste { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: min(420px, calc(100vw - 32px)); max-height: 340px; overflow-y: auto;
  background: var(--yuzey); border: 1px solid var(--cizgi2); border-radius: 12px; box-shadow: var(--golge); padding: 6px; }
.ktp-menu-liste label { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; font-size: 13px; line-height: 1.35; cursor: pointer; }
.ktp-menu-liste label:hover { background: var(--yuzey2); }
.ktp-menu-liste label span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ktp-menu-liste label b { font-variant-numeric: tabular-nums; color: var(--soluk); font-weight: 600; }
.ktp-menu-liste label.sifir { opacity: .55; }
.ktp-menu-liste input { margin-top: 2px; padding: 0; }
.ktp-sayi { margin: 4px 0 10px; }
.ktp-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.ktp-kart { --renk: var(--cizgi2); display: flex; flex-direction: column; background: var(--yuzey); border: 1px solid var(--cizgi); border-top: 3px solid var(--renk);
  border-radius: var(--r); overflow: hidden; color: var(--metin); text-decoration: none !important; transition: box-shadow .2s, transform .2s; min-width: 0; }
.ktp-kart:hover { box-shadow: var(--golge); transform: translateY(-2px); }
.ktp-kart[data-sonuc="kazanan"] { --renk: var(--iyi); } .ktp-kart[data-sonuc="kaybeden"] { --renk: var(--kotu); } .ktp-kart[data-sonuc="izlemede"] { --renk: var(--orta); }
.ilh-kart[data-durum="onayli"], .ilh-kart[data-durum="kartlasti"] { --renk: var(--iyi); } .ilh-kart[data-durum="reddedildi"] { --renk: var(--kotu); } .ilh-kart[data-durum="aday"] { --renk: var(--vurgu); }
.ktp-yuz { position: relative; aspect-ratio: 4 / 5; background: var(--yuzey2); overflow: hidden; }
.ktp-yuz img, .ktp-yuz video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.ktp-oynat { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, #000 55%, transparent); color: #fff; font-size: 15px; pointer-events: none; transition: opacity .2s; }
.ktp-kart:hover .ktp-oynat { opacity: 0; }
.ktp-metin-yuz { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 34px 14px 14px; background: color-mix(in srgb, var(--renk) 9%, var(--yuzey2)); }
.ktp-metin-yuz p { margin: 0; font: 500 15px/1.4 var(--font-baslik); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ktp-metin-yuz .rozet { align-self: flex-start; }
.ktp-kose { position: absolute; top: 8px; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--yuzey) 88%, transparent); color: var(--metin2); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ktp-kose.sol { left: 8px; } .ktp-kose.sag { right: 8px; }
.ktp-sonuc, .ilh-durum { color: var(--renk); }
.ktp-kart[data-sonuc="olculmedi"] .ktp-sonuc { color: var(--soluk); }
.ktp-alt { padding: 9px 12px 11px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ktp-ad { font-weight: 600; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ktp-olcu { font-size: 11.5px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.orta-yazi { color: var(--orta); }
.bos-deger { color: var(--soluk); opacity: .75; }
.ktp-geri { margin-bottom: 14px; }
.ktp-sayfa { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 14px; align-items: start; }
.ktp-blok { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 14px 16px; min-width: 0; }
.ktp-blok h2 { font: 600 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); margin: 0 0 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ktp-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; margin: 0; }
.ktp-alan { min-width: 0; }
.ktp-alan.genis { grid-column: 1 / -1; }
.ktp-alan dt { font-size: 11.5px; color: var(--soluk); margin-bottom: 1px; }
.ktp-alan dd { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.ktp-alan dd.pre { white-space: pre-wrap; background: var(--yuzey2); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; max-height: 420px; overflow-y: auto; }
.ktp-medya, .ktp-sonuc-blok { grid-column: 1 / -1; }
.ktp-medya-kap { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.ktp-medya-kap figure { margin: 0; flex: 0 1 360px; min-width: 0; }
.ktp-medya-kap img, .ktp-medya-kap video { width: 100%; max-height: 560px; object-fit: contain; border-radius: 10px; background: #000; display: block; }
.ktp-medya-kap figure.ses { flex: 1 1 320px; }
.ktp-medya-kap figure.ses figcaption { font-size: 12px; color: var(--soluk); margin-bottom: 4px; overflow-wrap: anywhere; }
.ktp-medya-kap audio { width: 100%; }
.ktp-medya-bos { flex: 0 1 280px; aspect-ratio: 4 / 5; border: 1px dashed var(--cizgi2); border-radius: 10px; display: grid; place-content: center; text-align: center; gap: 4px; color: var(--soluk); font-size: 13px; padding: 12px; }
.ktp-link-onizleme small { display: block; font-size: 11.5px; overflow-wrap: anywhere; }
.ktp-medya-yok { margin: 10px 0 0; padding-left: 18px; color: var(--soluk); }
.ktp-sonuc-blok { --renk: var(--cizgi2); border-left: 4px solid var(--renk); }
.ktp-sonuc-blok[data-sonuc="kazanan"] { --renk: var(--iyi); } .ktp-sonuc-blok[data-sonuc="kaybeden"] { --renk: var(--kotu); } .ktp-sonuc-blok[data-sonuc="izlemede"] { --renk: var(--orta); }
.ktp-sonuc-bas { margin: 0 0 4px; font-size: 14px; }
.ktp-sonuc-rozet { display: inline-block; font-weight: 650; font-size: 13px; padding: 2px 10px; border-radius: 999px; color: var(--renk); background: color-mix(in srgb, var(--renk) 14%, var(--yuzey)); margin-right: 6px; }
.ktp-sonuc-blok[data-sonuc="olculmedi"] .ktp-sonuc-rozet { color: var(--soluk); }
.ktp-kaynaklar, .ktp-eksik, .ilh-gecmis { margin: 10px 0 0; padding-left: 18px; font-size: 13.5px; }
.ktp-kaynaklar li, .ilh-gecmis li { margin-bottom: 6px; overflow-wrap: anywhere; }
.ktp-eksik li { color: var(--metin2); margin-bottom: 3px; overflow-wrap: anywhere; }
.ktp-nereden { margin-top: 10px; border-top: 1px solid var(--cizgi); padding-top: 8px; }
.ktp-nereden summary { cursor: pointer; font-size: 13px; color: var(--soluk); margin-bottom: 8px; }
.ktp-kapi-disi { border-color: var(--amber); }
.ktp-kardes { margin-top: 22px; }
.ktp-kardes h2 { font: 600 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); margin: 0 0 10px; }
.kucuk-izgara { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.ilh-hooklar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.ilh-hook { border: 1px solid var(--cizgi); border-radius: 10px; padding: 10px; }
.ilh-hook > b { display: block; font-size: 12px; color: var(--soluk); margin-bottom: 6px; }
.ktp-dipnot { margin-top: 18px; }
@media (max-width: 700px) {
  .ktp-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ktp-metin-yuz { padding: 30px 10px 10px; } .ktp-metin-yuz p { font-size: 13.5px; -webkit-line-clamp: 6; }
  .ktp-suz-ad { min-width: 0; flex: 1 0 100%; }
  .bolum-grup { padding-left: 0; border-left: 0; }
  .ktp-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ktp-medya-kap figure, .ktp-medya-bos { flex: 1 1 100%; }
}

/* Stüdyo = üretim hattı (Saltuk 25 Eylül: "bizim işimizin kalbi… çok güzel tasarlanmalı, sistematik olmalı").
   Sıra her bölümde aynı: hedef şeridi → bölüm sekmeleri → 8 duraklı hat → araçlar → açık kart → kart ızgarası. */
.ilh-kart[data-sonuc="ilham-onayli"], .ilh-kart[data-sonuc="ilham-kartlasti"] { --renk: var(--iyi); }
.ilh-kart[data-sonuc="ilham-reddedildi"] { --renk: var(--kotu); }
.ilh-kart[data-sonuc="ilham-aday"] { --renk: var(--vurgu); }
.st-hat { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; counter-reset: durak; }
.st-hat li { position: relative; min-width: 0; }
.st-hat li + li::before { content: "›"; position: absolute; left: -6px; top: 50%; transform: translate(-50%, -50%); color: var(--soluk); font-size: 13px; pointer-events: none; }
.st-durak { width: 100%; min-height: 58px; display: flex; flex-direction: column; justify-content: space-between; gap: 2px; text-align: left; cursor: pointer;
  border: 1px solid var(--cizgi); border-bottom: 3px solid var(--durak, var(--cizgi2)); border-radius: 10px; background: var(--yuzey); color: var(--metin); padding: 7px 9px; font: 500 12px/1.25 var(--sans); }
.st-durak b { font: 650 20px/1 var(--font-baslik); font-variant-numeric: tabular-nums; }
.st-durak-ad { color: var(--metin2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-durak:hover { border-color: var(--cizgi2); }
.st-durak.bos b { color: var(--soluk); font-weight: 500; }
.st-durak.aktif { background: color-mix(in srgb, var(--durak, var(--vurgu)) 14%, var(--yuzey)); border-color: var(--durak, var(--vurgu)); }
.st-durak:focus-visible, .ktp-kart:focus-visible, .cip:focus-visible, .bolum-grup-ad:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.st-durak.d-fikir { --durak: var(--cizgi2); } .st-durak.d-brief { --durak: var(--amber); } .st-durak.d-onay, .st-durak.d-uretim { --durak: var(--vurgu); }
.st-durak.d-raf { --durak: var(--metin2); } .st-durak.d-yayin { --durak: var(--vurgu); } .st-durak.d-olcum { --durak: var(--amber); } .st-durak.d-kapandi { --durak: var(--soluk); }
.st-durak.d-yayin b { color: var(--vurgu); } .st-durak.d-olcum:not(.bos) b { color: var(--amber); }
.st-gorunum { display: inline-flex; border: 1px solid var(--cizgi2); border-radius: 999px; overflow: hidden; }
.st-gorunum button { background: transparent; border: 0; padding: 6px 14px; font: 500 12.5px var(--sans); color: var(--metin2); cursor: pointer; }
.st-gorunum button.aktif { background: var(--metin); color: var(--kagit); }
.st-izgara { margin-top: 4px; }
.ktp-kart.secili { outline: 2px solid var(--vurgu); outline-offset: 1px; }
.ktp-kart[role="button"] { cursor: pointer; }
.st-kart-rozet { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 3px; }
.st-sec { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--soluk); margin-top: 4px; align-self: flex-start; cursor: pointer; }
.st-sec input { margin: 0; padding: 0; }
.kotu-yazi { color: var(--kotu); }
.st-bos { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.st-kart { margin: 0 0 16px; }
/* Stüdyo kart düzenleyicisindeki eski `.dugme` düğmeleri panel düğme dilinde (tanımsızdı, tarayıcı varsayılanı görünüyordu) */
.dugme { font: 550 13px var(--sans); cursor: pointer; border-radius: 999px; padding: 6px 14px; border: 1px solid transparent; background: var(--yuzey2); color: var(--metin); white-space: nowrap; }
.dugme:hover { background: var(--cizgi); }
.dugme.ana { background: var(--vurgu); color: var(--vurgu-ust); }
.dugme.kucuk { padding: 4px 11px; font-size: 12.5px; }
@media (max-width: 980px) { .st-hat { grid-template-columns: repeat(4, minmax(0, 1fr)); } .st-hat li:nth-child(4n + 1)::before { display: none; } }
@media (max-width: 700px) {
  /* telefon: tek sütun kart, dokunma alanı ≥ 44 px (accessibility.md › 44x44 pt) */
  .ktp-izgara, .kucuk-izgara { grid-template-columns: minmax(0, 1fr); }
  .ktp-yuz { aspect-ratio: 16 / 11; }
  button.cip, .bolum-grup-ad, .ktp-menu > summary, .st-gorunum button, :is(.st-arac, .ktp-arac, .ktp-geri, .st-bos, .bos, .st-kart-bas) :is(.dug, .dugme) { min-height: 44px; display: inline-flex; align-items: center; }
  .ktp-menu > summary { padding: 0 14px; }
  .st-hat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-hat li::before { display: none; }
  .st-durak { min-height: 52px; flex-direction: row; align-items: center; }
  .st-sec { min-height: 44px; font-size: 13px; }
  .st-sec input { width: 20px; height: 20px; }
  .ktp-menu-liste label { min-height: 44px; align-items: center; }
  .st-arac > * { flex: 1 1 100%; }
  .st-gorunum button { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ktp-kart, .ktp-kart:hover { transform: none; transition: none; } }
/* yalnız metin olan yüz daha kısa: boş alan kart boyu kadar uzamasın; medyalı yüz 4:5 kalır */
.ktp-yuz:has(.ktp-metin-yuz) { aspect-ratio: 5 / 4; }
@media (max-width: 700px) { .ktp-yuz:has(.ktp-metin-yuz) { aspect-ratio: auto; min-height: 150px; } }

/* Sistemler (25 Eylül): özet 4 sayı · 7 grup · sistem kartı. Rozet rengi sozluk.durum[].renk (--soluk/--orta/--iyi/--vurgu) */
.sis-ozet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.sis-ozet-oge { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 14px; cursor: pointer; text-align: left;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-bottom: 3px solid var(--renk); border-radius: var(--r); color: var(--metin); font: 500 12.5px var(--sans); }
.sis-ozet-oge b { font: 650 26px/1 var(--font-baslik); color: var(--renk); font-variant-numeric: tabular-nums; }
.sis-ozet-oge.aktif { background: color-mix(in srgb, var(--renk) 13%, var(--yuzey)); border-color: var(--renk); }
.sis-ozet-oge:focus-visible, .sis-kart:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.sis-tutarsiz { background: var(--kirmizi-acik); color: var(--kotu); border-radius: 10px; padding: 8px 12px; margin: 0 0 14px; font-size: 13px; }
.sis-grup { margin: 0 0 22px; }
.sis-grup h2 { font: 600 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); margin: 0; }
.sis-gerekce { margin: 2px 0 10px; font-size: 12.5px; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sis-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.sis-kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-left: 4px solid var(--renk); border-radius: var(--r); padding: 12px 14px; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: box-shadow .2s; }
.sis-kart:hover { box-shadow: var(--golge); }
.sis-kart-bas { display: flex; gap: 8px; align-items: flex-start; }
.sis-kart-bas h3 { flex: 1; margin: 0; font: 600 15px/1.3 var(--sans); overflow-wrap: anywhere; }
.sis-no { font: 600 12px/1.6 var(--sans); color: var(--soluk); font-variant-numeric: tabular-nums; min-width: 18px; }
.sis-rozet { flex: none; font-size: 11.5px; font-weight: 600; padding: 1px 9px; border-radius: 999px; color: var(--renk); border: 1px solid transparent;
  background: color-mix(in srgb, var(--renk) 14%, var(--yuzey)); white-space: nowrap; }
.sis-rozet.kayitsiz { border: 1px dashed var(--renk); background: transparent; }
.sis-not { margin: 0; font-size: 13px; color: var(--metin2); line-height: 1.4; }
.sis-yontem summary { cursor: pointer; font-size: 12.5px; color: var(--soluk); }
.sis-yontem p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; }
.sis-alt { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--soluk); align-items: center; }
.sis-panel { font-weight: 600; }
.sis-eksik { font-size: 11.5px; color: var(--soluk); opacity: .85; overflow-wrap: anywhere; }
.sis-cekmece .ktp-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sis-alt-baslik { margin: 16px 0 4px; font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); }
.sis-komut { display: block; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; padding: 8px 10px; }
@media (max-width: 700px) {
  .sis-ozet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sis-izgara { grid-template-columns: minmax(0, 1fr); }
  .sis-yontem summary { min-height: 44px; display: flex; align-items: center; }
  .sis-panel { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Tek liste (kart 14, 25 Eylül): Bugün N/3 (aşınca kırmızı), Sırada'ya dönüş, sahip/marka rozeti; Görevler sayfası salt okuma */
.say-kucuk.yp-asim { color: var(--kotu); background: var(--kirmizi-acik); font-weight: 700; }
.yp-asim-not { margin: 0 0 8px; font-size: 12.5px; color: var(--kotu); }
.yp-siraya { margin: 4px 0 0 26px; }
.yp-durum { font-size: .9em; }
.rozet.yp-sahip { background: var(--vurgu-acik); color: var(--vurgu); }
.rozet.yp-marka { background: var(--yuzey2); color: var(--metin2); border: 1px solid var(--cizgi2); }
.yp-marka-suz { margin: 0 0 12px; }
.yp-yonlendir { margin: 0 0 14px; padding: 8px 12px; border-radius: 10px; background: var(--vurgu-acik); font-size: 13.5px; }
.durum-isaret { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--cizgi2); display: grid; place-items: center; font-size: 13px; flex: none; }
@media (max-width: 700px) { .yp-siraya { min-height: 44px; } }

/* İlham düğmeleri (25 Eylül, Saltuk onayı madde 4): kart sayfasının üstünde durum şeridi + Onayla · Reddet · Karta çevir.
   Reddet ve Karta çevir satır içi panel açar (modal yok, bağlam kaybolmaz); renk durumdan: aday vurgu, onaylı/kartlaştı iyi, ret kötü. */
.ilh-serit { --renk: var(--vurgu); background: var(--yuzey); border: 1px solid var(--cizgi); border-left: 4px solid var(--renk); border-radius: var(--r); padding: 14px 16px; margin: 0 0 16px; }
.ilh-serit[data-durum="onayli"], .ilh-serit[data-durum="kartlasti"] { --renk: var(--iyi); }
.ilh-serit[data-durum="reddedildi"] { --renk: var(--kotu); }
.ilh-serit-ust { display: flex; gap: 12px 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ilh-serit-bas { flex: 1 1 320px; min-width: 0; }
.ilh-serit-bas h2 { margin: 0; font-size: inherit; }
.ilh-serit-bas h2:focus { outline: none; }
.ilh-serit-bas p { margin: 6px 0 0; }
.ilh-durum-rozet { display: inline-block; font: 650 13px var(--sans); letter-spacing: .02em; padding: 3px 12px; border-radius: 999px; color: var(--renk); background: color-mix(in srgb, var(--renk) 14%, var(--yuzey)); }
.ilh-serit-ne { font-size: 14px; color: var(--metin2); line-height: 1.45; overflow-wrap: anywhere; }
.ilh-serit-ne code { font-size: 12px; }
.ilh-eylem { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ilh-eylem .dug { min-height: 36px; }
.ilh-flas { margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--iyi) 12%, var(--yuzey)); color: var(--iyi); font-size: 13.5px; font-weight: 600; }
.ilh-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cizgi); display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.ilh-panel-ne { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--metin2); }
.ilh-panel-alan { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 550; color: var(--metin); }
.ilh-panel-alan .soluk { font-weight: 400; }
.ilh-panel-alan input { width: 100%; }
.ilh-panel-dug { display: flex; gap: 8px; flex-wrap: wrap; }
.ilh-hata:empty { display: none; }
.ilh-hata { margin: 0; }
.dug.tehlike:not(:disabled):hover { background: var(--kirmizi-acik); }

/* Sistemler › Panoya kart aç (madde 6): eksik sistemler kuruluş sırası + çekmecede tek eylem; panoda sistem rozeti */
.sis-sira { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 4px 14px 10px; margin: 0 0 22px; }
.sis-sira > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 8px 0 6px; list-style: none; }
.sis-sira > summary::-webkit-details-marker { display: none; }
.sis-sira > summary::before { content: "▸"; color: var(--soluk); font-size: 12px; transition: transform .2s; }
.sis-sira[open] > summary::before { transform: rotate(90deg); }
.sis-sira-bas { font: 600 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--metin2); }
.sis-sira-liste { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 4px 16px; }
.sis-sira-oge { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--cizgi); min-width: 0; }
.sis-sira-ac { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 8px 0; text-align: left; cursor: pointer; color: var(--metin); font: 500 13.5px var(--sans); min-height: 40px; }
.sis-sira-ac:hover .sis-sira-ad { color: var(--vurgu); }
.sis-sira-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rozet.sis-pano-yok { background: transparent; border: 1px dashed var(--cizgi2); color: var(--soluk); }
a.rozet.sis-pano { text-decoration: none; }
.sis-pano-kutu { background: var(--vurgu-acik); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font-size: 14px; }
.sis-pano-kutu.var { background: color-mix(in srgb, var(--iyi) 10%, var(--yuzey)); }
.sis-pano-kutu.var a { font-weight: 600; overflow-wrap: anywhere; }
.sis-pano-kutu q { overflow-wrap: anywhere; }
.rozet.yp-sistem { background: color-mix(in srgb, var(--vurgu) 10%, var(--yuzey)); color: var(--vurgu); text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.yp-kart.vurgulu { outline: 2px solid var(--vurgu); outline-offset: 2px; }

/* Çekmece telefonda tam ekran (HIG sheets.md: compact genişlikte sayfa tam ekran), güvenli alan payı; kapatma ≥ 44 px */
@media (max-width: 700px) {
  .cekmece { width: 100vw; left: 0; border-left: 0; box-shadow: none; padding-bottom: env(safe-area-inset-bottom); }
  .cekmece-bas { padding: calc(14px + env(safe-area-inset-top)) 16px 12px; }
  .cekmece-govde { padding: 14px 16px; }
  .cekmece-alt { padding: 12px 16px; flex-wrap: wrap; }
  #cekmeceKapat { min-width: 44px; min-height: 44px; justify-content: center; }
  .sis-cekmece .ktp-dl { grid-template-columns: minmax(0, 1fr); }
  .ilh-eylem { width: 100%; }
  .ilh-eylem .dug, .ilh-panel-dug .dug, .sis-pano-kutu .dug { min-height: 44px; flex: 1 1 auto; justify-content: center; }
  .sis-sira-ac { min-height: 44px; }
  a.rozet.sis-pano, .rozet.yp-sistem { padding: 8px 12px; }
  /* başlık (telefon denetimi 25 Eylül): menü öğeleri 34/29 px'ti → 44 px dokunma alanı, satır yüksekliği aynı kalır (dış boşluk içe alındı) */
  .ana-menu a { min-height: 44px; margin: 2px 0 2px; box-sizing: border-box; }
  .alt-menu { padding-top: 0; padding-bottom: 4px; }
  .alt-menu a { min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }
  .alt-menu .etiket { align-self: center; }
  .logo { display: inline-block; line-height: 44px; }
  .mod-dugme { width: 44px; height: 44px; }
  .komut-dugme, .bas-sag .marka-sec { min-height: 44px; align-items: center; }
  /* medya yoksa boş çerçeve 4:5 değil kısa şerit (telefonda 800 px boşluk yapıyordu); ilham bağlantı önizlemesi de */
  .ktp-medya-bos { aspect-ratio: auto; min-height: 96px; }
  /* açılır süzgeç listesi telefonda satır genişliğinde (sağa taşıyordu) */
  .ktp-menuler { position: relative; }
  .ktp-menu { position: static; }
  .ktp-menu-liste { left: 0; right: 0; width: auto; }
  /* video oynatıcı ekrana sığar: genişlik 100 %, yükseklik ekranın %70'i */
  .ktp-medya-kap video, .ktp-medya-kap img { max-height: 70vh; }
  .st-alt-blok > summary, .st-havuz > summary, .ktp-nereden > summary, .st-rev-eski > summary { min-height: 44px; display: flex; align-items: center; gap: 6px; }
  .st-tablo .stSec { width: 22px; height: 22px; }
  .st-tablo td:first-child { padding: 10px 8px; }
  /* yapışkan öğeler telefonda da çalışsın: overflow-x:hidden gövdeyi kaydırma kabı yapıp sticky'yi öldürüyordu → clip.
     Başlık telefonda yapışkan değil (üç satır, ekranın beşte biri); süzgeç çubuğu ve bölüm menüsü en üste yapışır. */
  html, body { overflow-x: clip; }
  .bas { position: relative; }
  .bolum-grup-ad { gap: 4px; }
  /* sayfa içi denetimi: düğme, alan ve seçimler ≥ 44 px; rozet bağlantıları dokunulabilir; işaret kutusu parmak boyu */
  #icerik .dug, #icerik .dugme { min-height: 44px; }
  #icerik input:not([type="checkbox"]):not([type="radio"]), #icerik select, #cekmeceGovde input, #cekmeceGovde select { min-height: 44px; }
  a.rozet.sis-pano, a.rozet.yp-sistem { min-height: 44px; display: inline-flex; align-items: center; }
  .yp-bitti { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; margin: -10px 0 -10px -12px; }
  .yp-bitti input, .yp-rutin input[type="checkbox"] { width: 22px; height: 22px; }
}

/* Başlık (25 Eylül): Sistemler bölümü eklenince 701-1180 px'te ana menü sağdaki araçları ekran dışına itiyordu (sayfa yatay
   kayıyordu). Menü kalan yeri alır ve kendi içinde yatay kayar; sağ araçlar hep görünür. */
@media (min-width: 701px) {
  .bas-ic > .ana-menu { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .bas-ic > .ana-menu::-webkit-scrollbar { display: none; }
  .ana-menu a { white-space: nowrap; flex: none; }
  .bas-ic > .bas-sag { flex: none; margin-left: auto; }
}

/* Stüdyo HIG turu 2 (25 Eylül): yapışkan süzgeç çubuğu (bölüm sekmeleri + hat), kart düzenleyicisi 8 bölüm + durak adımları.
   "--bas-h" başlığın ölçülen yüksekliği (app.js › basOlc). Kart açıkken süzgeç yerine düzenleyicinin bölüm menüsü yapışır. */
.st-suzgec.yapiskan { position: sticky; top: var(--bas-h, 0px); z-index: 15; background: color-mix(in srgb, var(--zemin) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); margin: 0 -8px 10px; padding: 10px 8px 2px; border-bottom: 1px solid transparent; }
.st-suzgec.yapiskan .st-hat { margin-bottom: 8px; }

.st-kart { padding: 18px 20px 20px; }
.st-kart-bas { flex-wrap: wrap; }
.st-kart-kimlik { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.st-kart-kimlik .rozet { align-self: flex-start; }
.st-kart-kimlik .baslik-girdi { font-size: 22px; letter-spacing: -.01em; }
.dugme.kirli { box-shadow: 0 0 0 2px color-mix(in srgb, var(--vurgu) 35%, transparent); }

/* durak adımları: kapı durumu her durakta */
.st-adim { list-style: none; margin: 14px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.st-adim-oge { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 7px 8px 6px; border-radius: 8px; background: var(--yuzey2); min-width: 0; border-top: 3px solid var(--cizgi2); }
.st-adim-ad { font: 600 12px/1.25 var(--sans); color: var(--metin2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-adim-not { font-size: 11px; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.st-adim-oge.gecti { border-top-color: var(--iyi); }
.st-adim-oge.gecti .st-adim-not { color: var(--iyi); }
.st-adim-oge.simdi { background: color-mix(in srgb, var(--vurgu) 14%, var(--yuzey)); border-top-color: var(--vurgu); }
.st-adim-oge.simdi .st-adim-ad { color: var(--metin); }
.st-adim-oge.simdi .st-adim-not { color: var(--vurgu); font-weight: 600; }
.st-adim-oge.ileride { background: transparent; border: 1px dashed var(--cizgi2); border-top-width: 3px; border-top-style: solid; }
.st-adim-oge.kapali .st-adim-not { color: var(--orta); }
.st-adim-oge.sirada.kapali { border-top-color: var(--orta); }
.st-adim-oge.sirada:not(.kapali) { border-top-color: var(--iyi); }
.st-kapi ul { margin: 4px 0 0; padding-left: 18px; }
.st-kapi li { margin: 1px 0; }
.st-kapi.acik { background: color-mix(in srgb, var(--iyi) 11%, var(--yuzey)); color: var(--iyi); }

/* bölüm menüsü (kart açıkken üstte yapışık) */
.st-bolum-nav { position: sticky; top: var(--bas-h, 0px); z-index: 14; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 14px -20px 0; padding: 8px 20px;
  background: color-mix(in srgb, var(--yuzey) 92%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid var(--cizgi); }
.st-bolum-nav::-webkit-scrollbar { display: none; }
.st-bolum-nav button { flex: none; display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 5px 11px 5px 6px;
  font: 500 13px var(--sans); color: var(--metin2); cursor: pointer; white-space: nowrap; }
.st-bolum-nav button:hover { background: var(--yuzey2); }
.st-bolum-nav .no { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--yuzey2); font: 650 11px var(--sans); font-variant-numeric: tabular-nums; }
.st-bolum-nav button.eksik .no { background: var(--amber-acik); color: var(--amber); }
.st-bolum-nav .nokta { width: 6px; height: 6px; border-radius: 50%; background: var(--orta); }

/* bölümler */
.st-bloklar { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.st-blok { border: 1px solid var(--cizgi); border-radius: 12px; background: var(--kagit); scroll-margin-top: calc(var(--bas-h, 0px) + 60px); }
.st-blok.eksikli { border-left: 3px solid var(--orta); }
.st-blok-bas { display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 6px; flex-wrap: wrap; }
.st-katla { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 8px 6px; cursor: pointer; color: var(--metin); text-align: left; min-height: 40px; }
.st-katla h3 { margin: 0; font: 600 15px var(--sans); }
.st-katla::after { content: "▾"; color: var(--soluk); font-size: 12px; margin-left: 2px; transition: transform .2s; }
.st-katla[aria-expanded="false"]::after { transform: rotate(-90deg); }
.st-blok-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--metin); color: var(--kagit); font: 650 12px var(--sans); flex: none; }
.st-blok.eksikli .st-blok-no { background: var(--orta); color: #fff; }
.st-blok-durum { font-size: 12px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.st-blok-durum.eksik { color: var(--orta); font-weight: 600; }
.st-blok-govde { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.st-blok-dug { display: flex; gap: 6px; flex-wrap: wrap; }
.st-ipucu { margin: 0; }
.st-izgara-alan { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.st-izgara-alan.genis2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.st-izgara-alan .st-alan.genis { grid-column: auto; }
.st-alan > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.st-alan > span i { font-style: normal; font-size: 11.5px; }
.st-alan.eksik .girdi { border-color: color-mix(in srgb, var(--orta) 55%, var(--cizgi2)); background: color-mix(in srgb, var(--orta) 5%, var(--yuzey)); }
.st-kapi-et { font: 600 10.5px/1.5 var(--sans); letter-spacing: .02em; padding: 0 7px; border-radius: 999px; background: var(--yuzey2); color: var(--soluk); white-space: nowrap; }
.st-kapi-et.eksik { background: var(--amber-acik); color: var(--amber); }
.st-kapi-et.gecti, .st-kapi-et.dolu { background: transparent; color: var(--iyi); padding: 0; }
.st-kaynak { grid-column: auto; border-left: 3px solid var(--vurgu); padding-left: 12px; display: flex; flex-direction: column; gap: 8px; }
.st-kaynak-bas { font-weight: 600; font-size: 13px; }
.st-alt-blok { border-top: 1px solid var(--cizgi); padding-top: 8px; }
.st-alt-blok > summary { cursor: pointer; font-weight: 550; font-size: 13.5px; padding: 4px 0; }
.st-alt-baslik { font: 600 13px var(--sans); margin-bottom: 6px; }
.st-hook { background: var(--yuzey); }
.st-hook.tam { border-color: color-mix(in srgb, var(--iyi) 40%, var(--cizgi)); }
.st-hook-bas { justify-content: space-between; }
.st-hook-durum { font-size: 11.5px; font-weight: 600; }
.st-hook-durum.eksik { color: var(--orta); } .st-hook-durum.tam { color: var(--iyi); }
.st-hook-iki { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; }
.st-uyari { background: var(--amber-acik); color: var(--amber); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.st-dogr-isaret { display: inline-flex; align-items: center; gap: 6px; }
.st-yayin { border-top: 1px solid var(--cizgi); padding-top: 10px; }

.st-kapi-et.ileride { background: transparent; border: 1px dashed var(--cizgi2); }
.st-havuz { margin-top: 2px; } .st-havuz summary { cursor: pointer; }
@media (max-width: 980px) { .st-adim { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  /* telefon: süzgeç çubuğu tek satır, yatay kayar (hat 8 durak, sekmeler) — dikeyde yer yemez */
  .st-suzgec.yapiskan { margin: 0 -14px 8px; padding: 8px 14px 0; }
  .st-suzgec .st-bolum { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 8px; padding-bottom: 8px; }
  .st-suzgec .st-bolum::-webkit-scrollbar, .st-suzgec .st-hat::-webkit-scrollbar, .st-adim::-webkit-scrollbar { display: none; }
  .st-suzgec .bolum-grup { flex-wrap: nowrap; }
  .st-suzgec .cip, .st-suzgec .bolum-grup-ad { flex: none; white-space: nowrap; }
  .st-suzgec .st-hat { display: flex; overflow-x: auto; scrollbar-width: none; gap: 6px; scroll-snap-type: x proximity; }
  .st-suzgec .st-hat li { flex: 0 0 auto; scroll-snap-align: start; }
  .st-suzgec .st-durak { min-height: 44px; width: auto; min-width: 96px; gap: 8px; }
  .st-kart { padding: 14px 12px 16px; margin-left: -4px; margin-right: -4px; }
  .st-kart-bas .bas-sag { width: 100%; }
  .st-kart-bas .bas-sag .dugme { flex: 1 1 auto; justify-content: center; }
  .st-adim { display: flex; overflow-x: auto; scrollbar-width: none; }
  .st-adim-oge { flex: 0 0 104px; }
  .st-bolum-nav { margin: 12px -12px 0; padding: 6px 12px; }
  .st-bolum-nav button { min-height: 44px; }
  .st-blok-govde { padding: 4px 10px 12px; }
  .st-katla { min-height: 44px; }
  .st-hook-iki { grid-template-columns: minmax(0, 1fr); }
  .st-blok-dug .dugme, .st-rev-form .dugme { min-height: 44px; }
  .st-kontrol-satir, .st-kriter label, .st-dogr-isaret { min-height: 44px; align-items: center; }
  .st-rev-form { flex-wrap: wrap; }
  /* tablo görünümü telefonda kendi içinde kayar (sayfa yatay taşmaz) */
  #stListe .st-tablo { display: block; overflow-x: auto; }
}

/* Statik bas (25 Eylül, madde 2): kartın Üretim ve yayın bölümünde; raf hook başına 4:5 + 9:16 yan yana, basınca büyür */
.st-statik { border: 1px solid var(--cizgi); border-radius: 12px; background: var(--yuzey); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.stk-bas { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.stk-bas .st-alt-baslik { margin: 0; }
.stk-not { margin: 0; font-size: 13px; background: var(--amber-acik); color: var(--amber); border-radius: 8px; padding: 6px 10px; }
.stk-not.kotu-yazi { background: var(--kirmizi-acik); }
.stk-secim { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.stk-alan { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--soluk); }
.stk-alan > span i { font-style: normal; }
.stk-aile button:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.stk-oran { display: flex; gap: 12px; align-items: center; min-height: 34px; color: var(--metin); font-size: 13.5px; }
.stk-oran label { display: inline-flex; gap: 6px; align-items: center; }
.stk-aile-ne { margin: 0; }
.stk-eylem { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stk-eylem .dugme:disabled { opacity: .5; cursor: not-allowed; }
.stk-hata { background: var(--kirmizi-acik); color: var(--kotu); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; overflow-wrap: anywhere; }
.stk-is { display: flex; flex-direction: column; gap: 6px; }
.stk-is-bas { font-weight: 600; font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.stk-raf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; max-width: 900px; }
.stk-hook { border: 1px solid var(--cizgi); border-radius: 10px; padding: 8px; background: var(--kagit); }
.stk-hook-bas { font-size: 13px; margin-bottom: 6px; }
.stk-cift { display: grid; grid-template-columns: 4fr 2.25fr; gap: 8px; align-items: end; }
.stk-kare { margin: 0; min-width: 0; }
.stk-kare figcaption { font-size: 11.5px; color: var(--soluk); margin-top: 3px; overflow-wrap: anywhere; }
.stk-buyut { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; overflow: hidden; }
.stk-buyut img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--yuzey2); }
.stk-kare.dikey .stk-buyut img { aspect-ratio: 9 / 16; }
.stk-kare.bos, .stk-yok { aspect-ratio: 4 / 5; display: grid; place-items: center; border: 1px dashed var(--cizgi2); border-radius: 8px; color: var(--soluk); font-size: 12px; }
.stk-tablo td, .stk-tablo th { font-size: 12.5px; }
.tablo-kap { overflow-x: auto; }
dialog.stk-buyuk { padding: 10px; border: 0; border-radius: 14px; background: var(--yuzey); max-width: min(92vw, 720px); max-height: 92vh; cursor: zoom-out; }
dialog.stk-buyuk::backdrop { background: color-mix(in srgb, #000 60%, transparent); }
dialog.stk-buyuk img { display: block; max-width: 100%; max-height: calc(92vh - 60px); margin: 0 auto; border-radius: 8px; }
dialog.stk-buyuk p { text-align: center; margin: 6px 0 0; }
@media (max-width: 700px) {
  .stk-secim { flex-direction: column; align-items: stretch; }
  .stk-aile button { flex: 1; min-height: 44px; }
  .stk-oran label { min-height: 44px; }
  .stk-oran input { width: 22px; height: 22px; }
  .stk-eylem .dugme { flex: 1 1 100%; min-height: 44px; }
}

/* Yayına giren yeni reklam sayacı (k141, 25 Eylül): Bugün ve Stüdyo hedef şeridi. Renk sozluk.durum[].renk */
.hiz { --renk: var(--soluk); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: end; }
.hiz-ana { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hiz-etiket { font-size: 13px; color: var(--metin2); font-weight: 550; }
.hiz-deger { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.hiz-deger b { font: 650 30px/1 var(--font-baslik); color: var(--renk); font-variant-numeric: tabular-nums; }
.hiz-hedef { font-size: 14px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.hiz-durum { font-size: 12px; font-weight: 650; padding: 1px 9px; border-radius: 999px; color: var(--renk); background: color-mix(in srgb, var(--renk) 14%, var(--yuzey)); }
.hiz-alt { grid-column: 1; font-size: 13px; color: var(--metin2); }
.hiz-kapsam { grid-column: 1 / -1; margin: 2px 0 0; font-size: 11.5px; color: var(--soluk); }
.hiz-cubuk { position: relative; list-style: none; margin: 0; padding: 0; display: flex; width: max-content; gap: 6px; align-items: flex-end; height: 64px; grid-row: 1 / span 2; grid-column: 2; }
.hiz-cubuk li { position: relative; width: 22px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.hiz-cubuk li span { width: 100%; min-height: 2px; background: color-mix(in srgb, var(--renk) 55%, var(--cizgi2)); border-radius: 3px 3px 0 0; }
.hiz-cubuk li:last-child span { background: var(--renk); }
.hiz-cubuk small { position: absolute; bottom: -16px; font-size: 10px; color: var(--soluk); }
.hiz-cubuk b { position: absolute; top: -14px; font-size: 10px; font-weight: 600; color: var(--metin2); font-variant-numeric: tabular-nums; }
.hiz-hedef-cizgi { position: absolute; left: -4px; right: -4px; border-top: 1px dashed var(--iyi); pointer-events: none; }
.hiz-cubuk { margin: 14px 0 16px; }
.hiz-ay { grid-column: 1 / -1; }
.hiz-ay > summary { cursor: pointer; font-size: 12.5px; color: var(--soluk); }
.hiz-ay .hiz-cubuk { margin-left: 4px; }
.bugun-hiz { background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge); padding: 12px 18px; margin: 0 0 18px; }
.st-hedef .hiz { margin-bottom: 6px; }
.st-fikir-hedef { margin-top: 4px; }

/* Aksiyon kuyruğu (sistem 17): Stüdyo'nun en üstünde; kazanan başına kart, hüküm bekleyenler katlanır */
.aks { background: var(--yuzey); border: 1px solid var(--cizgi); border-left: 4px solid var(--iyi); border-radius: var(--r); padding: 12px 14px; margin: 10px 0 12px; display: flex; flex-direction: column; gap: 10px; }
.aks.bos { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; border-left-color: var(--cizgi2); padding: 8px 14px; }
.aks-bas { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; align-items: center; }
.aks-kota { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.aks-kova { position: relative; font-size: 12px; color: var(--metin2); padding-bottom: 5px; font-variant-numeric: tabular-nums; }
.aks-kova b { font-weight: 650; }
.aks-kova i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: linear-gradient(to right, var(--vurgu) var(--oran), var(--yuzey2) var(--oran)); }
.aks-kova i::after { content: ""; position: absolute; left: var(--hedef); top: -2px; bottom: -2px; border-left: 1.5px solid var(--metin2); }
.aks-kova.geride b { color: var(--orta); }
.aks-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 10px; }
.aks-kart { border: 1px solid var(--cizgi); border-radius: 10px; background: var(--kagit); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aks-ust { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.aks-sonuc { font-size: 11.5px; font-weight: 650; color: var(--iyi); background: color-mix(in srgb, var(--iyi) 13%, var(--yuzey)); padding: 1px 8px; border-radius: 999px; }
.aks-ad { font-size: 14px; overflow-wrap: anywhere; }
.aks-olcu { font-size: 12.5px; color: var(--metin2); font-variant-numeric: tabular-nums; }
.aks-neden { margin: 0; font-size: 13px; color: var(--metin2); line-height: 1.45; }
.aks-hip > summary, .aks-huk > summary { cursor: pointer; font-size: 13px; font-weight: 550; }
.aks-hip-ic { margin-top: 6px; }
.aks-eylem { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.aks-yol { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--soluk); }
.aks-kart-ad { flex: 1 1 100%; overflow-wrap: anywhere; }
.aks-cevap:empty { display: none; }
.aks-cevap { font-size: 13px; }
.aks-huk ul { margin: 8px 0 0; padding-left: 18px; max-height: 320px; overflow-y: auto; }
.aks-huk li { margin-bottom: 6px; font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .hiz { grid-template-columns: minmax(0, 1fr); }
  .hiz-cubuk { grid-column: 1; grid-row: auto; }
  .aks-kota { margin-left: 0; }
  .aks-eylem .dugme, .aks-yol select { min-height: 44px; flex: 1 1 auto; }
  .aks-hip > summary, .aks-huk > summary, .hiz-ay > summary { min-height: 44px; display: flex; align-items: center; gap: 6px; }
}

/* ---------- Fikir kartı (25 Eylül): yolculuk şeridi, üretim ızgarası, oynatıcı, medya ekle, analiz, ürün süzgeci ---------- */
.fy { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 12px 14px; margin: 12px 0 10px; }
.fy-bas { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 10px; }
.fy-adim { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.fy-oge { --fy: var(--cizgi2); position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 8px 10px 9px; border-radius: 10px;
  background: var(--kagit); border-top: 3px solid var(--fy); font-size: 12.5px; }
.fy-oge.fy-tamam { --fy: var(--iyi); } .fy-oge.fy-suruyor, .fy-oge.fy-bekliyor { --fy: var(--orta); } .fy-oge.fy-hukum { --fy: var(--kotu); }
.fy-oge.fy-yok { color: var(--soluk); }
.fy-no { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 650 11px var(--sans); background: var(--fy); color: var(--yuzey); }
.fy-oge.fy-yok .fy-no { background: var(--yuzey2); color: var(--soluk); }
.fy-ad { font-weight: 650; color: var(--metin); line-height: 1.25; }
.fy-oge.fy-yok .fy-ad { color: var(--soluk); }
.fy-durum { color: var(--metin2); font-variant-numeric: tabular-nums; }
.fy-ayr { color: var(--soluk); font-size: 11.5px; line-height: 1.35; overflow-wrap: anywhere; }
.fy-oge .dug { align-self: flex-start; margin-top: 2px; }
.fy-format { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; }
.fy-f { --renk: var(--cizgi2); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 13px var(--sans); color: var(--metin); background: var(--kagit);
  border: 1px solid var(--cizgi); border-left: 3px solid var(--renk); border-radius: 10px; padding: 6px 10px; cursor: pointer; text-align: left; min-height: 36px; }
.fy-f[data-sonuc="kazanan"] { --renk: var(--iyi); } .fy-f[data-sonuc="kaybeden"] { --renk: var(--kotu); } .fy-f[data-sonuc="izlemede"] { --renk: var(--orta); }
.fy-f:hover { border-color: var(--cizgi2); }
.fy-ok { color: var(--soluk); font-size: 18px; }
.st-gun7 { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 8px 12px; border-radius: 10px; background: var(--kagit); border-left: 3px solid var(--cizgi2); margin-bottom: 10px; }
.st-gun7.fy-hukum { border-left-color: var(--kotu); } .st-gun7.fy-tamam { border-left-color: var(--iyi); } .st-gun7.fy-bekliyor { border-left-color: var(--orta); }

.iz-format { margin: 10px 0 16px; }
.iz-format-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.iz-format-bas .bosluk { flex: 1; }
.iz-kap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--kagit); }
table.iz { border-collapse: separate; border-spacing: 0; min-width: 100%; }
table.iz th, table.iz td { padding: 6px; vertical-align: top; border-bottom: 1px solid var(--cizgi); }
table.iz tr:last-child th, table.iz tr:last-child td { border-bottom: 0; }
table.iz thead th { font: 600 11.5px var(--sans); color: var(--soluk); text-align: left; letter-spacing: .02em; white-space: nowrap; }
table.iz tbody th { text-align: left; font-weight: 600; font-size: 13px; min-width: 104px; max-width: 150px; position: sticky; left: 0; background: var(--kagit); z-index: 1; }
.iz-cesit { overflow-wrap: anywhere; }
.iz-bas { margin-top: 4px; }
.iz-hucre { --renk: var(--cizgi2); display: flex; flex-direction: column; gap: 4px; width: 96px; padding: 0; border: 1px solid var(--cizgi); border-top: 3px solid var(--renk);
  border-radius: 8px; background: var(--yuzey); cursor: pointer; overflow: hidden; text-align: left; font: 11.5px var(--sans); color: var(--metin2); }
.iz-hucre[data-durum="basildi"] { --renk: var(--vurgu); } .iz-hucre[data-durum="yayinda"] { --renk: var(--orta); }
.iz-hucre[data-sonuc="kazanan"] { --renk: var(--iyi); } .iz-hucre[data-sonuc="kaybeden"] { --renk: var(--kotu); } .iz-hucre[data-sonuc="izlemede"] { --renk: var(--orta); }
.iz-hucre[data-durum="yok"] { border-style: dashed; border-top-style: solid; background: transparent; }
.iz-hucre:hover { box-shadow: var(--golge); }
.iz-hucre:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.iz-yuz { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--yuzey2); }
.iz-hucre[data-durum="yok"] .iz-yuz { background: transparent; aspect-ratio: 4 / 3; }
.iz-yuz img, .iz-yuz video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.iz-oynat { position: absolute; inset: auto 6px 6px auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px;
  background: color-mix(in srgb, #000 55%, transparent); color: #fff; }
.iz-bos { display: grid; place-items: center; height: 100%; color: var(--soluk); font-size: 11.5px; }
.iz-alt { display: flex; flex-wrap: wrap; gap: 3px 5px; align-items: center; padding: 0 5px 5px; }
.iz-sonuc { font-weight: 650; color: var(--renk); }
.iz-videolar, .iz-sesler { margin-top: 14px; }
.iz-videolar .ktp-kart { cursor: pointer; }
.fk-liste { list-style: none; margin: 4px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fk-dosya { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.fk-dosya > div { min-width: 0; overflow-wrap: anywhere; }
.fk-hucre h4 { margin: 10px 0 2px; font: 600 13px var(--sans); color: var(--soluk); }

dialog.oynatici { padding: 0; border: 0; border-radius: 14px; background: var(--yuzey); color: var(--metin); width: min(96vw, 760px); max-height: 96vh; overflow: hidden; }
dialog.oynatici::backdrop { background: color-mix(in srgb, #000 70%, transparent); }
.oy-bas, .oy-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; }
.oy-bas b { overflow-wrap: anywhere; }
.oy-bas .bosluk { flex: 1; }
.oy-alt { justify-content: center; }
.oy-sahne { background: #000; display: grid; place-items: center; }
.oy-sahne video, .oy-sahne img { display: block; max-width: 100%; max-height: min(72vh, 72dvh); width: auto; height: auto; }
.oy-sahne audio { width: 92%; margin: 24px 0; }
.oy-alt .dug, .oy-bas .dug { min-height: 36px; }

.me { display: flex; flex-direction: column; gap: 10px; }
.me-ust { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.me-ust label { flex: 1 1 220px; }
.me-ust > input, .me-ust > select { flex: 1 1 160px; }
.me-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 44vh; overflow-y: auto; border: 1px solid var(--cizgi); border-radius: 10px; padding: 4px; background: var(--yuzey); }
.me-dosya { width: 100%; display: flex; flex-direction: column; gap: 2px; text-align: left; border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 6px 8px; cursor: pointer; color: var(--metin); font: 13.5px var(--sans); min-height: 44px; }
.me-dosya:hover { background: var(--yuzey2); }
.me-dosya.secili { border-color: var(--vurgu); background: var(--vurgu-acik); }
.me-ad { font-weight: 600; overflow-wrap: anywhere; }
.me-rozet { display: flex; flex-wrap: wrap; gap: 4px; }
.me-secim { border-top: 1px solid var(--cizgi); padding-top: 10px; }
.me-secim video, .me-secim img { display: block; width: 100%; max-height: 38vh; object-fit: contain; background: #000; border-radius: 8px; }
.me-secim code { overflow-wrap: anywhere; }
.me-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.me-form .genis { grid-column: 1 / -1; }

.an-boyut { margin: 6px 0 10px; flex-wrap: wrap; }
.an-kap { max-height: none; }
.an-tablo { min-width: 760px; }
.an-tablo th[scope="row"] { font-weight: 600; max-width: 380px; overflow-wrap: anywhere; }
.an-tablo tbody tr[data-an] { cursor: pointer; }
.an-tablo tbody tr[data-an]:hover, .an-tablo tbody tr[data-an]:focus-visible { background: var(--vurgu-acik); outline: none; }
.an-tablo tfoot tr { font-weight: 650; border-top: 2px solid var(--cizgi2); }

.urun-serit { margin: 0 0 8px; }
.urun-rozet.u-ikramlik { background: var(--amber-acik); color: var(--amber); }
.urun-rozet.u-dovmec { background: var(--vurgu-acik); color: var(--vurgu); }

@media (max-width: 900px) { .fy-adim { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .fy-adim { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fy { padding: 10px; }
  .iz-hucre { width: 78px; }
  table.iz tbody th { min-width: 84px; max-width: 110px; font-size: 12px; }
  .me-form { grid-template-columns: minmax(0, 1fr); }
  dialog.oynatici { width: 100vw; max-width: 100vw; border-radius: 0; }
  .oy-alt .dug, .oy-bas .dug, .fy-f, .iz-format-bas .dug { min-height: 44px; }
  .urun-serit .cip { min-height: 44px; }
}
.an-s { font-weight: 650; font-variant-numeric: tabular-nums; }
.an-s.s-kazanan { color: var(--iyi); } .an-s.s-kaybeden { color: var(--kotu); } .an-s.s-izlemede { color: var(--orta); }
.oy-bas { flex-wrap: nowrap; align-items: flex-start; }
.oy-baslik { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.oy-baslik b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-tablo th, .an-tablo td { padding: 8px 10px; white-space: nowrap; text-align: right; vertical-align: top; }
.an-tablo th[scope="row"], .an-tablo thead th:first-child, .an-tablo td:last-child, .an-tablo thead th:last-child { text-align: left; }
.an-tablo th[scope="row"] { white-space: normal; min-width: 220px; max-width: 360px; font-size: 13px; line-height: 1.35; }
.an-boyut .cip { min-height: 32px; }
@media (max-width: 700px) { .an-tablo th[scope="row"] { min-width: 170px; } .an-boyut .cip { min-height: 44px; } }

/* Sistemler v2 — canlı sistemler (25 Eylül; sözleşme sistemler-api.md §8, §10). Renkler sozluk.*.renk → --renk; yeni renk yok.
   Kart yüzü: canlılık çubuğu 0-7 (7 bölme, "yok" boş; kayıt yoksa kesik/soluk + "~"), canlı rozetler (rutin gecikti kırmızı, öneri
   bekliyor amber, son öğrenim), son çalışma 7 günden eskiyse amber, rutin_metni kısaltılmış. Üst şerit: 4 durum + canlı sayılar. */
.sis-canli-serit { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: -8px 0 16px; }
.sis-canli-oge { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 52px; padding: 8px 12px; cursor: pointer; text-align: left;
  background: var(--yuzey2); border: 1px solid transparent; border-radius: var(--r); color: var(--metin2); font: 500 12px var(--sans); }
.sis-canli-oge b { font: 650 20px/1.1 var(--font-baslik); color: var(--metin); font-variant-numeric: tabular-nums; }
.sis-canli-oge b small { font: 500 12px var(--sans); color: var(--soluk); }
.sis-canli-oge.sabit { cursor: default; }
.sis-canli-oge.alarm b { color: var(--kotu); }   /* .kotu/.orta genel sınıfları ▼/● ön işareti basıyor; burada yalnız renk */
.sis-canli-oge.dikkat b { color: var(--orta); }
.sis-canli-oge.aktif { background: var(--yuzey); border-color: var(--metin); }
.sis-canli-oge:not(.sabit):hover { background: var(--yuzey); }
.sis-canli-oge:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.sis-gorunum { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--cizgi); }
.sis-gorunum .cip[role="tab"] { min-height: 30px; }
/* canlılık çubuğu: 7 bölme + sayı */
.sis-cubuk { display: inline-flex; align-items: center; gap: 3px; min-width: 0; }
.sis-cubuk-b { display: inline-block; width: 14px; height: 7px; border-radius: 2px; background: var(--renk); border: 1px solid var(--renk); }
.sis-cubuk-b.d-yok { background: transparent; border-color: var(--cizgi2); }
.sis-cubuk-b.d-kagitta { background: color-mix(in srgb, var(--renk) 40%, var(--yuzey)); }
.sis-cubuk b { margin-left: 4px; font: 600 11.5px var(--sans); color: var(--metin2); font-variant-numeric: tabular-nums; }
.sis-cubuk.tahmin .sis-cubuk-b { border-style: dashed; opacity: .55; }
.sis-cubuk.tahmin b { color: var(--soluk); font-weight: 500; }
.sis-kart-rozetler { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.sis-kart-rozetler:empty { display: none; }
.rozet.sis-rozet-yok { background: transparent; border: 1px dashed var(--cizgi2); color: var(--soluk); }
.sis-son.eski { color: var(--orta); font-weight: 600; }
.sis-rutin { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sis-olcu { overflow-wrap: anywhere; }
/* Canlılık görünümü: bugün bakılacak 4 kova + sıralı satırlar */
.sis-bak { margin: 0 0 22px; }
.sis-bak h2, .sis-canli-liste + h2 { font: 600 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); margin: 0; }
.sis-bak-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.sis-bak-kutu { background: var(--yuzey); border: 1px solid var(--cizgi); border-top: 3px solid var(--renk); border-radius: var(--r); padding: 10px 12px 8px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sis-bak-kutu h3 { margin: 0 0 6px; font: 600 13px var(--sans); color: var(--metin2); display: flex; justify-content: space-between; gap: 8px; }
.sis-bak-kutu h3 b { font: 650 18px/1 var(--font-baslik); color: var(--renk); font-variant-numeric: tabular-nums; }
.sis-bak-kutu > p { margin: 4px 0 6px; }
.sis-bak-oge { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; background: none; border: 0; border-top: 1px solid var(--cizgi); padding: 7px 0; text-align: left; cursor: pointer; color: var(--metin); font: 500 13px var(--sans); min-height: 36px; }
.sis-bak-oge:hover .sis-bak-ad { color: var(--vurgu); }
.sis-bak-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sis-bak-neden { flex: none; font-size: 11.5px; color: var(--soluk); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sis-canli-liste { list-style: none; margin: 8px 0 0; padding: 0; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); }
.sis-canli-satir { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--cizgi); border-left: 4px solid var(--renk); cursor: pointer; min-height: 40px; }
.sis-canli-satir:first-child { border-top: 0; border-radius: var(--r) var(--r) 0 0; }
.sis-canli-satir:last-child { border-radius: 0 0 var(--r) var(--r); }
.sis-canli-satir:hover { background: var(--yuzey2); }
.sis-canli-satir:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; }
.sis-canli-ad { font: 600 13.5px var(--sans); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sis-canli-son { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: flex-end; align-items: center; font-size: 12px; color: var(--soluk); }
/* Çekmece (v2): bloklar alt alta; yaşam döngüsü dikey liste, günlük, kuyruk, ölçü tablosu, kaynaklar, alt sistemler */
.sis-cekmece-ust { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 12px; }
.sis-blok { margin: 0 0 6px; }
.sis-tahmin-not { margin: 0 0 8px; font-size: 12.5px; color: var(--soluk); }
.sis-adimlar { list-style: none; margin: 0; padding: 0 0 0 6px; border-left: 2px solid var(--cizgi); }
.sis-adim { position: relative; display: flex; gap: 10px; padding: 0 0 12px 10px; }
.sis-adim:last-child { padding-bottom: 2px; }
.sis-adim-nokta { position: absolute; left: -12px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--renk); border: 2px solid var(--yuzey); box-shadow: 0 0 0 1px var(--renk); }
.sis-adim.d-yok .sis-adim-nokta { background: var(--yuzey); box-shadow: 0 0 0 1px var(--cizgi2); }
.sis-adim.d-kagitta .sis-adim-nokta { background: color-mix(in srgb, var(--renk) 45%, var(--yuzey)); }
.sis-adimlar.tahmin .sis-adim-nokta { opacity: .55; }
.sis-adim-ic { min-width: 0; flex: 1; }
.sis-adim-bas { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 13.5px; }
.sis-adim.sirada .sis-adim-bas > b { color: var(--vurgu); }
.rozet.sis-sirada { background: var(--vurgu-acik); color: var(--vurgu); font-weight: 600; }
.sis-adim-kanit { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sis-adim-kanit code { font-size: 11.5px; overflow-wrap: anywhere; }
.sis-etiket { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); font-weight: 600; margin-right: 2px; }
.sis-ogrenim, .sis-gel { list-style: none; margin: 0; padding: 0; }
.sis-ogr, .sis-gel-oge { padding: 9px 0 9px 12px; border-top: 1px solid var(--cizgi); border-left: 3px solid var(--cizgi); font-size: 13.5px; }
.sis-ogr:first-child { border-top: 0; }
.sis-ogr b, .sis-gel-oge b { display: block; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.sis-ogr p, .sis-gel-oge p { margin: 3px 0 0; color: var(--metin2); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.sis-ogr code, .sis-gel-oge code { display: inline-block; margin-top: 4px; font-size: 11.5px; overflow-wrap: anywhere; }
.sis-ogr-bas, .sis-gel-bas { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-bottom: 2px; }
.sis-gel-suz { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.sis-gel-oge { border-left-color: var(--renk); }
.sis-gel-oge.sirada { background: var(--vurgu-acik); border-radius: 0 10px 10px 0; }
.sis-gel-karar { font-style: italic; }
.sis-daha { margin-top: 6px; }
.sis-daha > summary { cursor: pointer; font-size: 12.5px; color: var(--vurgu); font-weight: 600; }
.sis-esikler { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.sis-esikler .rozet { white-space: normal; text-align: left; overflow-wrap: anywhere; }
.sis-olcu-tablo { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.sis-olcu-tablo th { text-align: left; font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); padding: 4px 8px 4px 0; border-bottom: 1px solid var(--cizgi); }
.sis-olcu-tablo td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--cizgi); vertical-align: top; overflow-wrap: anywhere; }
.sis-olcu-tablo td:first-child { white-space: nowrap; color: var(--soluk); }
.sis-olcu-tablo tr.son td { font-weight: 600; }
.sis-olcu-tablo code { font-size: 11.5px; }
.sis-kaynaklar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sis-kaynaklar li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.sis-kaynaklar li .rozet { flex: none; margin-top: 2px; }
.sis-kaynaklar li > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sis-kaynaklar code { font-size: 11.5px; overflow-wrap: anywhere; }
.sis-altlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.sis-alt-oge { background: var(--yuzey2); border-left: 3px solid var(--renk); border-radius: 0 10px 10px 0; padding: 8px 10px; font-size: 13px; min-width: 0; }
.sis-alt-bas { display: flex; gap: 6px; align-items: flex-start; justify-content: space-between; }
.sis-alt-bas b { font-weight: 600; line-height: 1.35; }
.sis-alt-oge p { margin: 3px 0 0; overflow-wrap: anywhere; }
.sis-komutlar { display: flex; flex-direction: column; gap: 4px; }
.sis-komutlar .sis-komut { font-size: 12px; }
@media (max-width: 700px) {
  .sis-canli-serit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sis-canli-satir { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .sis-canli-satir .sis-cubuk { grid-column: 1 / -1; }
  .sis-canli-satir .sis-cubuk-b { flex: 1; width: auto; }
  .sis-canli-son { grid-column: 1 / -1; justify-content: flex-start; }
  .sis-kart .sis-cubuk { width: 100%; }
  .sis-kart .sis-cubuk-b { flex: 1; width: auto; }
  .sis-bak-oge, .sis-gorunum .cip[role="tab"], .sis-gel-suz .cip { min-height: 44px; }
  .sis-cekmece .sis-blok .ktp-dl { grid-template-columns: minmax(0, 1fr); }
}

/* Masaüstü uyumsuzlukları (25 Eylül, Saltuk: "app'de masaüstü uyumsuzlukları mevcut, incele, tespit et, düzelt").
   Ölçüm 1320×860 (PeakGhost pencere varsayılanı), 26 rota tarandı: taşan öğe, kesilen görsel, yatay kaydırma. */
/* 1) Alt menü: Kreatif sekmesinde 2.295 px içerik 1.320 px pencereye sığmıyordu; macOS kaydırma çubuğu gizli olduğu için
   "5. Notlar · Sorun Giderme Süreci · Eylül Kreatif Planı" sağda kesik görünüyordu. Masaüstünde satır kırılır, telefonda kaydırma kalır. */
@media (min-width: 701px) {
  .alt-menu { flex-wrap: wrap; row-gap: 2px; overflow-x: visible; }
}
/* 2) Kanal başlığındaki durum rozeti tek satıra zorlanıyordu (Klaviyo: 1.169 px) → sayfa 5 px yatay kayıyordu. */
h1 .baslik-rozet { white-space: normal; display: inline; line-height: 1.6; overflow-wrap: anywhere; }
.bolum-bas h1 { overflow-wrap: anywhere; }
/* 3) Hedef şeridindeki kesik çizginin 4 px taşması (Bugün, Stüdyo) bölümü genişletiyordu. */
.hiz { overflow: clip; }
/* 4) Üretim ızgarası önizlemeleri masaüstünde 96 px'ti; 3 hook'un statiği okunmuyordu. Masaüstünde 150 px, telefonda 96 kalır. */
@media (min-width: 701px) {
  .iz-hucre { width: 150px; }
  table.iz tbody th { min-width: 120px; }
}
/* 5) Yatay kaydırılabilir tablo (teklif tablosu 1.646 px) macOS'ta çubuk gizli olduğu için kesik sanılıyordu: ince çubuk hep görünür. */
.tablo-kap { scrollbar-width: thin; }
.tablo-kap::-webkit-scrollbar { height: 8px; }
.tablo-kap::-webkit-scrollbar-thumb { background: var(--cizgi2); border-radius: 4px; }
/* 6) Saltuk'un ekran görüntüsü (25 Eyl 18:40, PeakGhost = WKWebView/Safari): üretim ızgarasında 3 hook'un statiği 150 px genişlik ×
   ~1.000 px yükseklikte, dikey şerit gibi "kesik" görünüyordu. Sebep: Safari, `aspect-ratio` verilen kutunun içindeki `height: 100%`
   görseli görselin kendi yüksekliğine göre çözüyor, kutu uzuyor (Chromium'da olmuyor, o yüzden ölçümde çıkmadı). Çözüm: görsel kutuya
   mutlak yerleşir, kutunun boyunu etkileyemez. Aynı kalıp kart yüzünde de var (.ktp-yuz), o da düzeltildi. */
.iz-yuz, .ktp-yuz { position: relative; overflow: hidden; }
.iz-yuz img, .iz-yuz video, .ktp-yuz img, .ktp-yuz video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.iz-yuz .iz-bos, .ktp-yuz .ktp-metin-yuz { position: relative; }

/* Statik sistemi (25 Eylül, Saltuk 19:10: "aynı Dövmeçhanem Statik Sistemi gibi; açıklayıcı, okunaklı; basınca farklı bir panel açılsın").
   Rota #/m/<marka>/statik-sistem (app.js › gorunumStatikSistem · ssKartAc). Yalnız mevcut değişkenler (tema/açık-koyu kendiliğinden).
   WKWebView tuzağı (masaüstü düzeltmesi 6): aspect-ratio kutusundaki görsel position:absolute; inset:0 — kutunun boyunu uzatamaz. */
.ss-lede { margin: 6px 0 0; color: var(--metin2); font-size: 14.5px; }
.ss-bolum { display: grid; gap: 12px; margin: 0 0 28px; }
.ss-bolum > *, .ss-suzgec > *, .ss-kart > * { min-width: 0; }   /* ızgara öğesi 820 px'lik tabloyla genişlemesin (telefonda sayfa yana kayıyordu) */
.ss-bolum > h2 { margin: 0; font: 700 22px/1.1 var(--serif); letter-spacing: -.01em; }
.ss-bolum > h2 .soluk { font: 500 14px var(--sans); }
.ss-eksenler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ss-eksen { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.ss-eksen-ad { font: 800 30px/1 var(--serif); color: var(--vurgu); letter-spacing: -.01em; }
.ss-kas { font: 600 11.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); }
.ss-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13.5px; color: var(--metin2); }
.ss-liste > li { min-width: 0; }
.ss-liste b { color: var(--metin); font-weight: 650; font-variant-numeric: tabular-nums; }
.ss-li { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 3px 6px; margin: 0 -6px; border-radius: 6px; cursor: pointer; line-height: 1.4; }
.ss-li:hover { background: var(--yuzey2); }
.ss-li:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 1px; }
.ss-li.aktif { background: var(--vurgu-acik); color: var(--metin); }
.ss-say { display: inline-block; min-width: 18px; text-align: center; font: 600 11px/1.6 var(--sans); background: var(--yuzey2); color: var(--metin2); border-radius: 999px; padding: 0 5px; margin-left: 2px; }
.ss-kod { font: 600 10.5px var(--sans); color: var(--soluk); letter-spacing: .04em; }
.ss-not { margin: 2px 0 0; font-size: 12.5px; color: var(--metin2); border-left: 3px solid var(--orta); padding-left: 10px; }
.ss-adimlar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.ss-adim { border-top: 3px solid var(--orta); padding-top: 8px; display: grid; gap: 2px; align-content: start; font-size: 13px; color: var(--metin2); min-width: 0; }
.ss-adim b { color: var(--metin); font-size: 14px; }
.ss-adim-no { font: 800 24px/1 var(--serif); color: var(--vurgu); }
.ss-kurallar { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-kural { font-size: 12.5px; padding: 3px 10px; border: 1px solid var(--cizgi); border-radius: 999px; background: var(--yuzey); color: var(--metin2); }
.ss-yontem > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--vurgu); }
.ss-yontem p { margin: 8px 0; font-size: 13.5px; line-height: 1.55; color: var(--metin2); max-width: 90ch; }
.ss-suzgec { display: grid; gap: 8px; margin: 0 0 18px; padding: 12px 14px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); }
.ss-hepsi { display: flex; gap: 6px; align-items: center; color: var(--metin2); }
.ss-tablo-kap { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--yuzey); scrollbar-width: thin; }
.ss-tablo { border-collapse: collapse; width: 100%; min-width: 820px; font-size: 13.5px; }
.ss-tablo th { text-align: left; font: 600 11.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); padding: 10px 10px 7px; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.ss-tablo td { padding: 10px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.ss-tablo tbody tr:last-child td { border-bottom: 0; }
.ss-tablo tbody tr { cursor: pointer; }
.ss-tablo tbody tr:hover td { background: var(--yuzey2); }
.ss-tablo tbody tr:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; }
.ss-no { font: 800 15px var(--serif); color: var(--vurgu); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ss-fikir { min-width: 240px; max-width: 380px; }
.ss-fikir b { font-weight: 600; }
.ss-alt { display: block; font-size: 12.5px; color: var(--metin2); margin-top: 2px; line-height: 1.45; }
.ss-asama, .ss-aile-hucre, .ss-tur-hucre { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ss-durum { font-size: 12.5px; color: var(--metin2); min-width: 150px; }
.ss-tag { display: inline-block; font: 600 11.5px/1.5 var(--sans); padding: 1px 7px; border-radius: 6px; background: var(--amber-acik); color: var(--metin); white-space: nowrap; margin: 1px 3px 1px 0; }
.ss-pill { display: inline-block; font: 600 12px/1.45 var(--sans); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.ss-pill.ss-ok { background: color-mix(in srgb, var(--iyi) 14%, var(--yuzey)); color: var(--iyi); }
.ss-pill.ss-bekle { background: var(--kirmizi-acik); color: var(--kotu); }
.ss-pill.ss-park { background: var(--yuzey2); color: var(--metin2); }
.ss-pill.ss-sor { background: var(--amber-acik); color: var(--orta); }
.ss-pano-kap > summary { cursor: pointer; margin-bottom: 8px; }
.ss-pano { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 12.5px; }
.ss-pano th, .ss-pano td { padding: 6px 8px; border-bottom: 1px solid var(--cizgi); text-align: left; vertical-align: top; }
.ss-pano thead th { font: 600 11px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--soluk); }
.ss-pano tbody th { font-weight: 500; white-space: nowrap; }
.ss-pano td.oneri { background: repeating-linear-gradient(135deg, var(--yuzey2) 0 6px, transparent 6px 12px); }
.ss-pano td.dolu { background: var(--vurgu-acik); }
.ss-pano-b { all: unset; cursor: pointer; font-weight: 600; color: var(--vurgu); }
.ss-pano-b:focus-visible { outline: 2px solid var(--vurgu); }
.ss-bos-hucre { color: var(--soluk); }
.ss-tur-rozet { background: var(--amber-acik); color: var(--metin); }
/* kart görünümü (çekmece geniş) */
.cekmece.ss-genis { width: min(900px, 96vw); }
.ss-kart { display: grid; gap: 18px; }
.ss-kart h3 { margin: 0 0 6px; font: 700 17px/1.2 var(--serif); }
.ss-dl { margin: 0; display: grid; border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--yuzey); }
.ss-dl-s { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 9px 14px; border-top: 1px solid var(--cizgi); }
.ss-dl-s:first-child { border-top: 0; }
.ss-dl dt { font: 600 11.5px/1.8 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); }
.ss-dl dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.ss-hip p { margin: 0 0 6px; overflow-wrap: anywhere; }
.ss-varlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ss-var { margin: 0; display: grid; gap: 6px; align-content: start; min-width: 0; }
.ss-var-bas { font-size: 13px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ss-kare { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--yuzey2); border: 1px solid var(--cizgi); }
.ss-kare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-kare-metin { position: absolute; inset: 0; padding: 12px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.ss-kare-metin p { margin: 0; font: 700 15px/1.25 var(--serif); color: var(--metin); overflow-wrap: anywhere; }
.ss-var-alt { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: start; }
.ss-dikey { position: relative; display: block; width: 44px; aspect-ratio: 9 / 16; border-radius: 6px; overflow: hidden; background: var(--yuzey2); border: 1px solid var(--cizgi); }
.ss-dikey img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-dikey.yok { display: grid; place-items: center; text-align: center; font: 600 10px/1.2 var(--sans); color: var(--soluk); }
.ss-var-metin { min-width: 0; }
.ss-var-metin p { margin: 0 0 4px; }
.ss-soz { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
/* Stüdyo kart düzenleyicisi: statik etiketleri (tür çipleri, aşama, aciliyet) + türün kapattığı ABG sorusu */
.st-tur-blok { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--yuzey2); }
.st-tur-bas { font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.st-tur-cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.st-tur-cip { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; padding: 3px 10px 3px 6px; border: 1px solid var(--cizgi2); border-radius: 999px; background: var(--yuzey); color: var(--metin2); cursor: pointer; }
.st-tur-cip.aktif { background: var(--vurgu-acik); border-color: var(--vurgu); color: var(--metin); }
.st-tur-cip input { margin: 0; }
.st-abg.tur-kapatir { border-left: 3px solid var(--iyi); padding-left: 8px; }
@media (max-width: 900px) {
  .ss-eksenler { grid-template-columns: minmax(0, 1fr); }
  .ss-adimlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .ss-adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-varlar { grid-template-columns: minmax(0, 1fr); }
  .ss-var { grid-template-columns: minmax(0, 1fr); }
  .ss-dl-s { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ss-li, .ss-suz .cip, .st-tur-cip { min-height: 44px; }
  .ss-li { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
  .cekmece.ss-genis { width: 100vw; }
}

/* ORTAK TEK SATIR (bütün temalar): app.js dört başlıkta <em> veriyor; Peak dışındaki temalarda vurgu görünmesin, başlık eskisi gibi dursun. */
h1 em { font: inherit; }

/* ==================================================================================================================
   PEAK AGENCY KATMANI · 4 Ekim 2026 (Saltuk: "peak panelini de ekrana bak ve yap")
   Kaynak: 🏰 300-Projects/Peak-Ajans/kimlik/Peak-Agency-Marka-Kimligi-v1/06-Arayuz-Kiti (tema.css, token-esleme.md).
   Rapor: 🏰 300-Projects/Peak-Ajans/11-Panel-Kimlik-Gecisi.md (bakılan 45 ekran, kontrast ölçümleri, muaf tutulanlar).
   Kapsam: her kural `:root[data-tema="peak"]` ile başlar; kâğıt · granit · ceviz · sistem temaları bu bloktan etkilenmez.
   Yalnız görünüş: başlık dili (Geist 800 BÜYÜK HARF), üst etiket, logo, koyu yüzde tek ışık, kontrast ve taşma düzeltmeleri.
   GERİ ALMA: bu bloğu (bu yorumdan dosya sonundaki "PEAK AGENCY KATMANI SONU" satırına kadar) sil. Başka hiçbir yere dokunulmadı.
   ================================================================================================================== */

/* --- katmanın kendi değişkenleri (açık yüz) --- */
:root[data-tema="peak"] {
  --font-vurgu: "DM Serif Display", Georgia, "Times New Roman", serif;
  --pk-vurgu-metin: #1E50FF;                                   /* vurgu, metin olarak */
  --pk-rozet-vurgu: #173FCC;                                   /* açık mavi dolgu üstünde mavi yazı (soluk kartta da ≥ 4,5) */
  --pk-rozet-orta: #6E4800;                                    /* açık amber dolgu üstünde amber yazı */
  --pk-rozet-iyi: #17642F;                                     /* açık yeşil dolgu üstünde yeşil yazı */
  --pk-dolgu-ust: #FFFFFF;                                     /* dolu durum rengi (amber, kırmızı) üstündeki yazı */
  --pk-isik: none;                                             /* ışık yalnız koyu yüzde */
}
/* --- koyu yüz: sistem koyuyken ve elle koyu seçiliyken (ikisi aynı değerler) --- */
@media (prefers-color-scheme: dark) {
  :root[data-tema="peak"]:not([data-mod="acik"]) {
    --pk-vurgu-metin: #7FD4FF;
    --pk-rozet-vurgu: var(--vurgu);
    --pk-rozet-orta: var(--orta);
    --pk-rozet-iyi: var(--iyi);
    --pk-dolgu-ust: #0A0A0A;
    --pk-isik: radial-gradient(ellipse 620px 300px at 50% -90px, rgba(30, 80, 255, .42), rgba(30, 80, 255, 0) 100%);
  }
}
:root[data-tema="peak"][data-mod="koyu"] {
  --pk-vurgu-metin: #7FD4FF;
  --pk-rozet-vurgu: var(--vurgu);
  --pk-rozet-orta: var(--orta);
  --pk-rozet-iyi: var(--iyi);
  --pk-dolgu-ust: #0A0A0A;
  --pk-isik: radial-gradient(ellipse 620px 300px at 50% -90px, rgba(30, 80, 255, .42), rgba(30, 80, 255, 0) 100%);
}

/* --- 1 · Sayfa başlığı: Geist 800, BÜYÜK HARF, sıkı. `lang="tr"` index.html'de var: i → İ, ı → I doğru çıkar. --- */
:root[data-tema="peak"] main h1 { font: 800 30px/1.08 var(--font-baslik); letter-spacing: -.03em; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
:root[data-tema="peak"] main h1.dev { font-size: 36px; line-height: 1.04; }
/* serif vurgu: başlıkta TEK kelime, küçük harf. app.js dört ana ekranda verir: Stüdyo, Besleme, Ghost'a sor, Yeni marka. */
:root[data-tema="peak"] main h1 em { font-family: var(--font-vurgu); font-style: italic; font-weight: 400; text-transform: lowercase; letter-spacing: -.01em; color: var(--pk-vurgu-metin); font-size: 1.06em; }
/* h1 içindeki rozet ve kod başlık değildir */
:root[data-tema="peak"] main h1 .rozet, :root[data-tema="peak"] main h1 code { text-transform: none; letter-spacing: 0; }
/* BÜYÜK HARFTEN MUAF (içerik, başlık değil):
   · Bugün brifingi: sayılı tam cümle   · belge / not gövdesi (.md)
   · `h1.icerik-baslik`: içerikten gelen başlık (marka adı, belge adı, vault notu, arama, rapor haftası, aylık kapanış,
     kütüphane ve ilham kaydı). Sınıfı app.js verir (4 Ekim, Saltuk: "küçük harf kalsın"). */
:root[data-tema="peak"] main .brif h1,
:root[data-tema="peak"] main .md h1,
:root[data-tema="peak"] main h1.icerik-baslik { font: 700 32px/1.15 var(--font-baslik); letter-spacing: -.025em; text-transform: none; }
:root[data-tema="peak"] main .brif h1 { font-size: 34px; line-height: 1.12; }
:root[data-tema="peak"] main .set-dun .md h1 { font-size: 17px; }

/* --- 2 · Üst etiket: kimliğin küçük etiketi (600, geniş aralık, soluk) --- */
:root[data-tema="peak"] .ust-etiket { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; color: var(--soluk); }

/* --- 3 · Logo: kalın BÜYÜK HARF, "&" tek serif vurgu --- */
:root[data-tema="peak"] .logo { font: 800 17px/1 var(--font-baslik); letter-spacing: -.01em; text-transform: uppercase; }
:root[data-tema="peak"] .logo em { font-family: var(--font-vurgu); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1.3em; line-height: 0; color: var(--pk-vurgu-metin); margin: 0 .04em; }

/* --- 4 · Işık: yalnız koyu yüzde, sayfanın tepesinde tek kaynak (içerikle birlikte kayar, yazı altına girmez) --- */
:root[data-tema="peak"] body { background-image: var(--pk-isik); background-repeat: no-repeat; }

/* --- 5 · Kontrast (WCAG AA 4,5:1). Ölçüm raporda. --- */
/* seçili düğme ve dolu durum rozeti: yazı rengi sabit beyazdı, koyu yüzde buz mavisi / amber üstünde 1,7:1 kalıyordu */
:root[data-tema="peak"] .set-hazir button.secili,
:root[data-tema="peak"] .set-etiketler button.secili { color: var(--vurgu-ust); }
:root[data-tema="peak"] .rozet.d-olcum,
:root[data-tema="peak"] .st-blok.eksikli .st-blok-no,
:root[data-tema="peak"] .anl-kayit.kayitta,
:root[data-tema="peak"] .mik-dugme.kayitta { color: var(--pk-dolgu-ust); }
/* açık dolgu üstünde aynı rengin yazısı: açık yüzde bir ton koyu (anlam aynı: mavi = tamam, amber = bekliyor, yeşil = iyi) */
:root[data-tema="peak"] .rozet.yesil { color: var(--pk-rozet-vurgu); }
:root[data-tema="peak"] .rozet.amber { color: var(--pk-rozet-orta); }
:root[data-tema="peak"] .ss-pill.ss-ok { color: var(--pk-rozet-iyi); }
:root[data-tema="peak"] .ss-pill.ss-sor { color: var(--pk-rozet-orta); }
:root[data-tema="peak"] .sis-rozet[style*="--iyi"] { color: var(--pk-rozet-iyi); }
:root[data-tema="peak"] .sis-rozet[style*="--orta"] { color: var(--pk-rozet-orta); }
/* opaklıkla soldurulmuş küçük yazılar: renk zaten --soluk, opaklık 4,5'in altına düşürüyordu */
:root[data-tema="peak"] .alt-menu .etiket,
:root[data-tema="peak"] .bos-deger,
:root[data-tema="peak"] .sis-eksik { opacity: 1; }
:root[data-tema="peak"] .komut-dugme kbd { opacity: 1; color: var(--soluk); }
/* sayısı sıfır süzgeç çipi: sönük kalır ama okunur (0,55 → 0,75) */
:root[data-tema="peak"] .cip.sifir, :root[data-tema="peak"] .ktp-menu-liste label.sifir { opacity: .75; }

/* --- 6 · Taşma düzeltmeleri (eski temalarda da vardı; yalnız bu temada düzeltildi) --- */
/* Yapılacaklar kartı: etiket sırası kartın dışına taşıyordu */
:root[data-tema="peak"] .yp-kart .yp-alt { flex-wrap: wrap; row-gap: 4px; }
/* Künye tablosu: uzun dosya yolu dar pencerede sayfayı yatay kaydırıyordu */
:root[data-tema="peak"] .tanim td code { overflow-wrap: anywhere; }
/* Teklif testi kartı: tek satır çip dar pencerede kartı aşıyordu */
:root[data-tema="peak"] .tk-test-kart .cip { white-space: normal; }
/* Başlık satırı (başlık + seçici + düğme): dar ekranda uzun seçici satırı ekran dışına itiyordu, başlık kesiliyordu */
:root[data-tema="peak"] main .bolum-bas > * { max-width: 100%; min-width: 0; }
/* Aylık gelir-gider: "Aylık net" çubuğu hücrenin tamamını alıp sayıyı yan sütuna itiyordu */
:root[data-tema="peak"] td:has(> .pl-cubuk) { white-space: nowrap; min-width: 190px; }
:root[data-tema="peak"] .pl-cubuk { width: calc(var(--w) * .42); }
/* Kanal ölçüm kartı: değer bazen cümle (ör. son kampanyanın adı); sayı puntosunda kartı uzatıyordu. Dört satırla sınırlı, gerisi kart içinde kayar. */
:root[data-tema="peak"] .olcum-kpi .kpi-d { font-size: 20px; line-height: 1.22; letter-spacing: -.015em; overflow-wrap: anywhere; max-height: 4.9em; overflow-y: auto; }
/* Arama sonucu: işaretli kelime soluk yazıyla 4,0:1 / 3,8:1 kalıyordu; telefonda dosya yolu satırı taşıyordu */
:root[data-tema="peak"] .sonuc .parca mark { color: var(--metin); }
:root[data-tema="peak"] .liste > a.sonuc > div[style*="flex"] { flex-wrap: wrap; }
:root[data-tema="peak"] .liste > a.sonuc b { overflow-wrap: anywhere; min-width: 0; }
/* ============================================ PEAK AGENCY KATMANI SONU ============================================ */

/* ---------- Giriş, kurulum, hesap düğmesi (21 Ekim, plan 28) ---------- */
.giris-perde { position: fixed; inset: 0; z-index: 90; background: var(--zemin); display: grid; place-items: center; padding: 16px; }
.giris-kutu { width: min(360px, 100%); display: grid; gap: 14px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 16px; padding: 28px 22px; }
.giris-kutu label { display: grid; gap: 6px; font-size: 14px; color: var(--metin2); }
.giris-kutu input { font: inherit; font-size: 16px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--cizgi2); background: var(--zemin); color: var(--metin); }
.giris-logo { font-family: var(--font-baslik); font-size: 26px; text-align: center; margin-bottom: 4px; }
.giris-logo em { color: var(--vurgu); }
.giris-hata { color: var(--kotu); font-size: 14px; margin: 0; }
.giris-not { color: var(--soluk); font-size: 13px; margin: 0; }
.ben-dugme { font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--cizgi2); background: transparent; color: var(--metin2); cursor: pointer; white-space: nowrap; }
.ben-parola { display: grid; gap: 8px; margin: 10px 0; }
.ben-parola input { font: inherit; font-size: 16px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--cizgi2); background: var(--zemin); color: var(--metin); }
.sh-oneri { display: block; margin-top: 8px; text-align: left; white-space: normal; }

/* 13 haftalık nakit: yatay kaydırma, sabit kalem adları ve veri eksikliği. */
.nakit-ozet { padding: 12px 16px; border: 1px solid var(--cizgi2); border-radius: var(--r); }
.nakit-kap { max-width: 100%; overflow: auto; isolation: isolate; }
.nakit-tablo { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 13px; }
.nakit-tablo caption { text-align: left; padding: 10px 0; color: var(--soluk); }
.nakit-tablo th, .nakit-tablo td { border-right: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); padding: 12px; vertical-align: top; background: var(--yuzey); }
.nakit-tablo thead th { min-width: 150px; text-align: right; background: var(--yuzey2); }
.nakit-tablo tr > th:first-child { position: sticky; left: 0; z-index: 2; min-width: 210px; max-width: 230px; text-align: left; box-shadow: 1px 0 var(--cizgi2); }
.nakit-tablo th small { display: block; max-width: 210px; font-size: 11px; line-height: 1.5; font-weight: 400; color: var(--soluk); margin-top: 5px; }
.nakit-tablo .nakit-blok th { background: var(--yuzey2); padding-block: 8px; font-weight: 700; color: var(--metin2); }
.nakit-hucre { min-width: 150px; text-align: right; }
.nakit-deger { min-height: 22px; font: 600 15px/1.5 var(--font-veri); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nakit-tablo td.nakit-eksik { background: color-mix(in srgb, var(--orta) 9%, var(--yuzey)); }
.nakit-negatif { color: var(--kotu); }
.nakit-bilgi { margin-top: 5px; font-size: 11px; color: var(--soluk); }
.nakit-bilgi summary { cursor: pointer; white-space: nowrap; }
.nakit-bilgi > div { max-width: 150px; margin-top: 8px; text-align: left; line-height: 1.5; overflow-wrap: anywhere; white-space: normal; }
.nakit-tur { border-bottom: 1px dashed var(--soluk); }
.nakit-gercek { color: var(--iyi); font-weight: 600; }
.nakit-eksik-yazi { margin-left: 7px; color: var(--orta); }
.nakit-kapanis .nakit-deger { font-weight: 750; }
.nakit-tablo td.nakit-en-dusuk { box-shadow: inset 0 0 0 2px var(--orta); }
.nakit-dusuk-etiket { display: block; color: var(--orta); font-size: 11px; font-weight: 600; margin-top: 7px; }
.nakit-arsiv { margin-top: 24px; border: 1px solid var(--cizgi2); border-radius: var(--r); padding: 14px; }
.nakit-arsiv > summary { cursor: pointer; font-weight: 600; }
@media (max-width: 600px) {
  .nakit-tablo tr > th:first-child { min-width: 140px; max-width: 160px; padding: 9px; }
  .nakit-tablo th small { max-width: 140px; }
}