/* ═════════════════════════════════════════════════════════════════════════
   Yönetim paneli — masaüstü ve telefon
   ═════════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#04070F; --ink2:#080E1C; --raise:#0B1424; --raise2:#101B30;
  --brand:#1D5FD6; --brand2:#2E7BFF; --brand-dim:rgba(46,123,255,.14);
  --paper:#F2F6FC; --muted:#8FA3C0; --muted2:#5C6E88;
  --line:rgba(143,163,192,.18); --line2:rgba(143,163,192,.32);
  --ok:#3FBF7F; --warn:#E8B54A; --bad:#E3603F;
  --font-display:"Playfair Display",Georgia,serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{background:var(--ink2);color:var(--paper);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--brand2)}
:focus-visible{outline:2px solid var(--brand2);outline-offset:2px;border-radius:6px}
.icon{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.125em}
.icon svg{width:100%;height:100%;display:block}
[hidden]{display:none!important}

/* ── Giriş ── */
#login{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:24px;background:var(--ink);z-index:90}
body.anon #login{display:flex}
#login form{width:100%;max-width:340px;background:var(--raise);border:1px solid var(--line);border-radius:20px;padding:30px 26px}
#login .brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
#login .brand svg{height:26px;width:auto;fill:var(--paper)}
#login h1{margin:0 0 4px;font-family:var(--font-display);font-size:22px}
#login p{margin:0 0 20px;font-size:13px;color:var(--muted)}
#login .err{color:var(--bad);font-size:13px;min-height:18px;margin-top:10px}

/* ── Kabuk ── */
#app{display:none;min-height:100vh;flex-direction:column}
body.auth #app{display:flex}
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(29,95,214,.16),rgba(8,14,28,.98));
  backdrop-filter:blur(8px);
}
.topbar h1{margin:0;font-family:var(--font-display);font-size:20px;font-weight:700;display:flex;align-items:center;gap:10px}
.topbar h1 .icon{color:var(--brand2);font-size:19px}
.grow{flex:1}
.tabs{display:flex;gap:4px;padding:0 18px;border-bottom:1px solid var(--line);overflow-x:auto;background:var(--ink2);position:sticky;top:53px;z-index:19}
.tab{padding:12px 15px;border:0;background:transparent;color:var(--muted);font-size:14px;font-weight:600;border-bottom:2px solid transparent;display:flex;align-items:center;gap:8px;white-space:nowrap}
.tab .icon{font-size:15px}
.tab[aria-selected="true"]{color:var(--paper);border-bottom-color:var(--brand2)}
main{flex:1;padding:20px 18px 60px}
.pane{display:none;max-width:1180px;margin:0 auto}
.pane.on{display:block}

/* ── Ortak parçalar ── */
.card{background:var(--raise);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:14px}
.card > h2{margin:0 0 4px;font-size:15px;font-weight:700;display:flex;align-items:center;gap:9px}
.card > h2 .icon{color:var(--brand2);font-size:16px}
.card > h2 .grow + .btn{margin-left:8px}
.hint{margin:0 0 14px;font-size:13px;color:var(--muted);line-height:1.55;max-width:70ch}
.hint:last-child{margin-bottom:0}
.hint code{background:rgba(0,0,0,.35);padding:1px 6px;border-radius:5px;font-size:12px;color:var(--paper)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 15px;border-radius:11px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);color:var(--paper);font-size:14px;font-weight:600;white-space:nowrap;
  transition:background 160ms ease,border-color 160ms ease;
}
.btn:hover{background:rgba(255,255,255,.10);border-color:var(--line2)}
.btn .icon{font-size:15px}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.pri:hover{background:var(--brand2);border-color:var(--brand2)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad);border-color:rgba(227,96,63,.34)}
.btn.danger:hover{background:rgba(227,96,63,.12)}
.btn.sm{padding:6px 10px;font-size:13px;border-radius:9px}
.btn.ico{padding:0;width:32px;height:32px;border-radius:9px;font-size:14px}
.btn.warnbtn{color:var(--warn);border-color:rgba(232,181,74,.38);background:rgba(232,181,74,.10)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}

.chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:rgba(255,255,255,.03);white-space:nowrap}
.chip .icon{font-size:13px}
.chip[data-tone="ok"]{color:var(--ok);border-color:rgba(63,191,127,.35);background:rgba(63,191,127,.10)}
.chip[data-tone="warn"]{color:var(--warn);border-color:rgba(232,181,74,.35);background:rgba(232,181,74,.10)}
.chip[data-tone="brand"]{color:var(--brand2);border-color:rgba(46,123,255,.35);background:var(--brand-dim)}

.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
input[type=text],input[type=number],input[type=password],select,textarea{
  width:100%;padding:9px 11px;border-radius:10px;background:var(--ink);
  border:1px solid var(--line);color:var(--paper);font-size:14px;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand2);outline:none}
textarea{resize:vertical;min-height:110px;font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.5}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
input[type=color]{width:100%;height:38px;padding:3px;border-radius:10px;background:var(--ink);border:1px solid var(--line);cursor:pointer}

.switch{display:flex;align-items:center;gap:11px;cursor:pointer;padding:3px 0}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:42px;height:24px;border-radius:999px;flex:none;background:rgba(255,255,255,.10);border:1px solid var(--line);position:relative;transition:background 180ms ease}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform 180ms ease,background 180ms ease}
.switch input:checked + .track{background:var(--brand);border-color:var(--brand)}
.switch input:checked + .track::after{transform:translateX(18px);background:#fff}
.switch input:focus-visible + .track{outline:2px solid var(--brand2);outline-offset:2px}
.switch .txt{font-size:14px;font-weight:500}
.switch .txt small{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:2px}

/* ── Ekran kartları ── */
.screens{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.scard{background:var(--raise);border:1px solid var(--line);border-radius:16px;padding:15px;display:flex;flex-direction:column;gap:11px}
.scard[data-active="0"]{opacity:.55}
.scard .head{display:flex;align-items:flex-start;gap:10px}
.scard h3{margin:0;font-size:15px;font-weight:700;line-height:1.3}
.scard .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.scard .url{font-size:12px;color:var(--muted);font-family:ui-monospace,Menlo,monospace;word-break:break-all}
.scard .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.swatch{width:34px;height:34px;border-radius:10px;flex:none;border:1px solid var(--line2)}

/* ── Kategori / ürün ── */
.catbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.catpill{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:11px;font-size:14px;font-weight:600;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted)}
.catpill .icon{font-size:15px}
.catpill .n{font-size:11px;color:var(--muted2);font-variant-numeric:tabular-nums}
.catpill[aria-selected="true"]{background:var(--brand-dim);border-color:rgba(46,123,255,.45);color:var(--paper)}
.catpill[aria-selected="true"] .n{color:var(--brand2)}

.itemhead,.itemrow{display:grid;grid-template-columns:44px minmax(0,1fr) 110px 150px;gap:8px;align-items:center}
.thumbbtn{
  width:44px;height:44px;border-radius:10px;padding:0;flex:none;overflow:hidden;
  border:1px solid var(--line);background:var(--ink);
  display:grid;place-items:center;color:var(--muted2);font-size:16px;
}
.thumbbtn:hover{border-color:var(--brand2);color:var(--brand2)}
.thumbbtn img{width:100%;height:100%;object-fit:cover;display:block}
.itemhead{padding:0 8px 8px;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted2)}
.itemrow{padding:8px;border-radius:12px;border:1px solid transparent}
.itemrow:nth-child(odd){background:rgba(255,255,255,.022)}
.itemrow:hover{border-color:var(--line)}
.itemrow[data-out="1"] input[type=text]{color:var(--muted2);text-decoration:line-through}
.itemrow .tools{display:flex;gap:4px;align-items:center;justify-content:flex-end}
@media (max-width:640px){
  .itemhead,.itemrow{grid-template-columns:44px minmax(0,1fr) 78px}
  .itemrow .tools{grid-column:1/-1}
  .itemhead span:last-child{display:none}
}

/* ── Görsel seçici ── */
#picker{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(4,7,15,.8)}
#picker[hidden]{display:none}
#picker .pbox{
  width:100%;max-width:720px;max-height:80vh;display:flex;flex-direction:column;
  background:var(--raise);border:1px solid var(--line2);border-radius:18px;overflow:hidden;
}
#picker .phead{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
#picker .phead h2{margin:0;font-size:15px;font-weight:700;display:flex;align-items:center;gap:9px}
#picker .phead h2 .icon{color:var(--brand2)}
#picker .media{flex:1;overflow:auto;padding:16px;margin:0}
#picker .pfoot2{padding:12px 16px;border-top:1px solid var(--line)}
#picker .mcard{cursor:pointer}
#picker .mcard:hover{border-color:var(--brand2)}

/* ── Ekran düzenleyici ── */
.editor{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:16px;align-items:start}
@media (max-width:1000px){ .editor{grid-template-columns:1fr} }
.preview{position:sticky;top:110px}
.preview .frame{
  width:100%;aspect-ratio:9/16;border-radius:14px;overflow:hidden;
  border:1px solid var(--line2);background:#000;
}
.preview iframe{width:1080px;height:1920px;border:0;transform-origin:top left;display:block}
.preview .cap{margin-top:9px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;justify-content:space-between}

.picklist{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow:auto;padding-right:4px}
.pickrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.pickrow[data-on="1"]{background:var(--brand-dim);border-color:rgba(46,123,255,.4)}
.pickrow .nm{flex:1;font-size:14px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickrow .n{font-size:11px;color:var(--muted2);font-variant-numeric:tabular-nums}
.pickrow .icon{font-size:16px;color:var(--brand2)}

/* ── Medya ── */
.media{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.mcard{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--ink);aspect-ratio:1}
.mcard img{width:100%;height:100%;object-fit:cover;display:block}
.mcard .del{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:8px;background:rgba(0,0,0,.65);border:1px solid var(--line2);color:#fff;display:grid;place-items:center;font-size:12px}

/* ── Bildirim ── */
#toast{
  position:fixed;left:50%;bottom:24px;z-index:80;
  transform:translate(-50%,14px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;
  font-size:14px;font-weight:600;background:var(--raise2);border:1px solid var(--line2);
  box-shadow:0 10px 34px rgba(0,0,0,.5);transition:opacity 220ms ease,transform 220ms ease;
  max-width:calc(100vw - 32px);
}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast .icon{font-size:15px;color:var(--brand2)}
#toast[data-tone="ok"] .icon{color:var(--ok)}
#toast[data-tone="bad"] .icon{color:var(--bad)}

.notice{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.6;background:var(--brand-dim);border:1px solid rgba(46,123,255,.3);color:#CFE0FF}
.notice .icon{font-size:16px;color:var(--brand2);margin-top:2px}
.notice.warn{background:rgba(232,181,74,.10);border-color:rgba(232,181,74,.3);color:#F2DFB4}
.notice.warn .icon{color:var(--warn)}
.notice b{color:#fff}
.notice code{background:rgba(0,0,0,.35);padding:1px 6px;border-radius:5px;font-size:12px}

/* ═════════════════════════════════════════════════════════════════════════
   Menü aktarım önizlemesi ve TV adres listesi
   (Aynı token'lar, aynı dil — panelin geri kalanıyla uyumlu.)
   ═════════════════════════════════════════════════════════════════════════ */
.misum{
  display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:12px;
  background:var(--brand-dim);border:1px solid rgba(46,123,255,.32);
  font-size:14px;font-weight:600;
}
.misum .icon{color:var(--brand2);font-size:15px}

.milist{
  margin-top:12px;border:1px solid var(--line);border-radius:12px;
  background:var(--ink);overflow:hidden;max-height:340px;overflow-y:auto;
}
.mihead{
  display:flex;align-items:center;gap:9px;padding:10px 14px;
  background:rgba(255,255,255,.03);border-bottom:1px solid var(--line);
  font-size:13px;font-weight:700;
}
.mihead .icon{color:var(--brand2);font-size:14px}
.mihead b{color:var(--brand2);font-weight:700}

.mirow{
  display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.3fr);
  gap:10px;align-items:baseline;padding:9px 14px;border-bottom:1px solid var(--line);
  font-size:13px;
}
.mirow:last-child{border-bottom:0}
.mitag{
  justify-self:start;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 8px;border-radius:99px;
}
.mitag.create{color:var(--ok);background:rgba(63,191,127,.14);border:1px solid rgba(63,191,127,.34)}
.mitag.update{color:var(--warn);background:rgba(232,181,74,.12);border:1px solid rgba(232,181,74,.34)}
.midiff{color:var(--muted2);font-size:12.5px}

.urlrow{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid var(--line);
}
.urlrow:last-child{border-bottom:0}
.urlrow > span{font-weight:600;font-size:14px;min-width:180px}
.urlrow code{
  flex:1;min-width:220px;font-size:12.5px;color:var(--muted);
  background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 10px;
  overflow:auto;white-space:nowrap;
}
@media (max-width:620px){
  .mirow{grid-template-columns:58px minmax(0,1fr)}
  .mirow .midiff{grid-column:1 / -1;padding-left:68px}
  .urlrow > span{min-width:0}
}

/* Küçük-resim sütunu 44px; "Görsel" başlığı oraya sığmayıp yan sütuna
   taşıyordu ("GÖRSELÜRÜN ADI"). Sütun zaten kendini anlatıyor. */
.itemhead > span{min-width:0;overflow:hidden;white-space:nowrap}
.itemhead > span:first-child{font-size:0}

/* Önizleme çerçevesi içinde 1080px genişliğinde bir iframe taşıyor. Dar
   ekranda .editor tek sütuna düştüğünde (1fr) sütunun en küçük boyu bu
   1080px'e zorlanıyor ve bütün panel yatay kayıyordu. Sütunların en küçük
   boyunu sıfırlamak çerçeveyi kendi kutusuna sığdırır. Telefonda önizleme
   yapışkan durmasın ve sayfayı kaplamasın. */
.editor > *{min-width:0}
@media (max-width:1000px){
  .preview{position:static}
  .preview .frame{max-width:340px}
}

/* Öne çıkan kart satırı: geniş ekranda kare + ürün + rozet yan yana,
   telefonda rozet ürünün altına iner ve kategori adı gizlenir. */
.featrow{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,180px);gap:14px;align-items:end}
@media (max-width:700px){
  .featrow{grid-template-columns:56px minmax(0,1fr)}
  .featrow > :last-child{grid-column:2 / -1}
  .featrow .pickrow > .n{display:none}
}

/* .btn bir <a> üzerinde de kullanılıyor (Ayarlar'daki "Aç", ekran
   kartlarındaki "Aç"). Kuralda text-decoration hiç yoktu, o yüzden
   bağlantılar düğme gibi görünüp altları çizili kalıyordu. */
a.btn{text-decoration:none}

/* ── Duvardaki duruş: dört televizyon resmi ──────────────────────────────
   Kullanıcı derece görmez, resme bakar. İnce şerit televizyonun kendi alt
   kenarı; TV çevrildikçe şerit de çevriliyor. Seçili olan vurgu rengine
   döner (aria-pressed zaten doğru anlamı taşıyor, ayrı sınıf gerekmedi). */
.tvsec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tvopt{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  padding:14px 8px;border-radius:12px;background:rgba(255,255,255,.03);
  border:1px solid var(--line);color:var(--muted);
  transition:background 160ms ease,border-color 160ms ease,color 160ms ease;
}
.tvopt:hover{border-color:var(--line2);color:var(--paper)}
.tvopt[aria-pressed="true"]{background:var(--brand-dim);border-color:rgba(46,123,255,.45);color:var(--brand2)}
.tvopt .nm{font-size:13px;font-weight:600}
.tvopt .sub{font-size:11px;color:var(--muted2);line-height:1.35}
.tvopt[aria-pressed="true"] .sub{color:var(--muted)}
@media (max-width:560px){ .tvsec{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Yönü sına — cevaplar pusula gibi dizilir: ↑ → ↓ ← */
.pusula{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pusula .btn{flex-direction:column;gap:3px;padding:12px 6px}
.pusula .btn b{font-size:19px;line-height:1}
.pusula .btn > span{font-size:12px;font-weight:500;color:var(--muted)}
@media (max-width:560px){ .pusula{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ── Kurulum sihirbazı ────────────────────────────────────────────────────
   Ekran oluşturmak fiziksel bir kurulum işi; adımlar görünür olsun ki
   nerede kalındığı belli olsun. */
.steps{display:flex;flex-wrap:wrap;gap:8px}
.step{
  display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  padding:7px 12px;border-radius:999px;border:1px solid var(--line);
  color:var(--muted2);background:rgba(255,255,255,.03);
}
.step .no{
  width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:11px;background:rgba(255,255,255,.07);color:var(--muted);
}
.step .no .icon{font-size:12px}
.step[data-d="now"]{color:var(--brand2);border-color:rgba(46,123,255,.45);background:var(--brand-dim)}
.step[data-d="now"] .no{background:var(--brand);color:#fff}
.step[data-d="ok"]{color:var(--ok);border-color:rgba(63,191,127,.3)}
.step[data-d="ok"] .no{background:rgba(63,191,127,.16);color:var(--ok)}

/* Adım 1 — iki büyük resim, derece yok */
.bicimsec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:560px}
.bicimsec button{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:26px 14px;border-radius:16px;background:rgba(255,255,255,.03);
  border:1px solid var(--line);color:var(--muted);
  transition:background 160ms ease,border-color 160ms ease,color 160ms ease;
}
.bicimsec button:hover{border-color:rgba(46,123,255,.45);background:var(--brand-dim);color:var(--brand2)}
.bicimsec .nm{font-size:16px;font-weight:700;margin-top:6px}
.bicimsec .sub{font-size:12px;color:var(--muted2)}
@media (max-width:520px){ .bicimsec{grid-template-columns:1fr} }

/* Adım 2/3 — kumandayla yazılacak adres, okunur dursun */
.kadres{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0}
.kadres code{
  flex:1;min-width:220px;font-size:14px;color:var(--paper);
  background:var(--ink);border:1px solid var(--line2);border-radius:10px;
  padding:11px 14px;overflow:auto;white-space:nowrap;
}
.kadres.buyuk code{font-size:19px;letter-spacing:.01em;padding:15px 18px}

/* Adım 3 — bağlantı bekleniyor */
.kdurum{
  display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
}
.kdurum b{display:block;font-size:15px}
.kdurum small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.kdurum .icon{font-size:26px;color:var(--ok)}
.kdurum[data-d="ok"]{border-color:rgba(63,191,127,.35);background:rgba(63,191,127,.08)}
.nabiz{
  width:14px;height:14px;border-radius:50%;flex:none;background:var(--brand2);
  box-shadow:0 0 0 0 rgba(46,123,255,.55);animation:nabiz 1.6s ease-out infinite;
}
@keyframes nabiz{
  70%{box-shadow:0 0 0 12px rgba(46,123,255,0)}
  100%{box-shadow:0 0 0 0 rgba(46,123,255,0)}
}
@media (prefers-reduced-motion:reduce){ .nabiz{animation:none} }

/* Adım 6 — şablon satırı: rozetler ada sığmayıp kesilmesin */
.ksablon .nm{white-space:normal;display:flex;flex-wrap:wrap;align-items:center;gap:8px;text-overflow:clip}
.ksablon .chip{font-size:11px;padding:3px 8px}

/* Bitti — özet */
.ozet{display:flex;flex-direction:column;gap:1px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.ozetsatir{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 14px;background:rgba(255,255,255,.03);font-size:13.5px;
}
.ozetsatir > span{color:var(--muted);flex:none}
.ozetsatir b{min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis}
.ozetsatir code{font-size:12.5px;background:var(--ink);padding:3px 8px;border-radius:6px}

/* Ekran kartındaki açık/kapalı noktası */
.chip .nokta{width:8px;height:8px;border-radius:50%;flex:none;background:var(--muted2)}
.chip .nokta[data-on="1"]{background:var(--ok);box-shadow:0 0 0 3px rgba(63,191,127,.18)}

/* ── Oynatma listesi ──────────────────────────────────────────────────────
   Tek şablon listenin özel hâli; satır düzeni ikisinde de aynı. */
.oyrow{
  display:grid;grid-template-columns:26px minmax(0,1fr) minmax(0,230px) auto;
  gap:12px;align-items:center;padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);margin-bottom:8px;
}
.oyrow .no{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;background:rgba(255,255,255,.07);color:var(--muted);
}
.oyrow .ad{display:flex;flex-direction:column;gap:3px;min-width:0}
.oyrow .ad b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oyrow .ad .chip{align-self:flex-start;font-size:11px;padding:3px 8px}
.oyrow .ad small{font-size:11px;color:var(--muted2)}
.oyrow .sure{display:flex;flex-direction:column;gap:6px;min-width:0}
.surekutu{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,110px);gap:8px}
@media (max-width:760px){
  .oyrow{grid-template-columns:26px minmax(0,1fr);row-gap:10px}
  .oyrow .sure{grid-column:2}
  .oyrow > .row-actions{grid-column:2;justify-content:flex-start}
}

/* ── Şablon içeri aktarma ─────────────────────────────────────────────────
   Reddetme sebepleri okunur bir liste hâlinde; "geçersiz paket" yetmez. */
.aktarhata{margin:0;padding:0 0 0 20px;list-style:none}
.aktarhata li{
  position:relative;font-size:13px;line-height:1.6;color:#F2DFB4;margin-bottom:8px;
  padding-left:4px;
}
.aktarhata li::before{
  content:"";position:absolute;left:-14px;top:9px;width:6px;height:6px;border-radius:50%;
  background:var(--warn);
}
.recete{
  margin:0 0 12px;padding:12px 14px;border-radius:10px;overflow:auto;
  background:var(--ink);border:1px solid var(--line);
  font:12px/1.6 ui-monospace,Menlo,monospace;color:var(--paper);white-space:pre;
}
#aktarKart .frame{
  width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:#000;
}
/* Paket önizlemesi panoyla aynı iki katmanı taşıyor: altta video, üstte
   paketin saydam belgesi. Ölçekleme sarmalayıcıya uygulanıyor. */
.paketonizleme{position:relative;transform-origin:top left;overflow:hidden;background:#000}
.paketonizleme > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.paketonizleme > iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.paketonizleme > iframe.kaplama{background:transparent;pointer-events:none;z-index:2}
@media (max-width:1000px){
  #aktarKart .editor{grid-template-columns:1fr!important}
}

/* Kart başlığındaki düğmeler dar ekranda alt satıra insin. "Menü şablonu
   oluştur" + "Şablon içeri aktar" yan yana 400px'e sığmıyordu ve bütün
   sayfayı yatay kaydırıyordu. */
.card > h2{flex-wrap:wrap;row-gap:8px}


/* ═══ GÖREV 13 · planlı listeler ve senkron ════════════════════════════════ */
.plrow{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--raise);margin-bottom:10px;flex-wrap:wrap}
.plrow[data-pasif="1"]{opacity:.55}
.plrow .ad{flex:1;min-width:180px}
.plrow .ad b{display:block}
.plrow .ad small{display:block;color:var(--muted);margin-top:3px}
.plrow .ic{color:var(--muted);font-size:13px;white-space:nowrap}

.gunsec{display:flex;gap:6px;flex-wrap:wrap}
.gunbtn{border:1px solid var(--line);background:var(--raise);color:var(--muted);
  border-radius:9px;padding:8px 12px;cursor:pointer;font:inherit;font-size:13px;min-width:48px}
.gunbtn[aria-pressed="true"]{border-color:var(--brand2);color:var(--paper);
  background:color-mix(in srgb,var(--brand2) 22%,var(--raise))}
.gunbtn:hover{color:var(--paper)}

.plform{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.plsablon{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.plsablon h3{margin:0 0 10px;font-size:14px;color:var(--muted);font-weight:600}

.takvim{display:grid;grid-template-columns:44px repeat(7,1fr);grid-template-rows:auto 220px;
  gap:4px;margin-top:16px;position:relative}
.tkad{text-align:center;font-size:11px;color:var(--muted);padding-bottom:2px}
.tkbos{}
.tksaat{position:relative;color:var(--muted);font-size:11px}
.tksaat span{position:absolute;right:6px;transform:translateY(-50%)}
.tkgun{position:relative;border:1px solid var(--line);border-radius:8px;background:var(--ink2);
  overflow:hidden}
.tkblok{position:absolute;left:2px;right:2px;border-radius:5px;font-size:10px;line-height:1.1;
  padding:2px 3px;overflow:hidden;color:var(--paper);
  background:color-mix(in srgb,var(--brand2) 55%,transparent);
  border:1px solid color-mix(in srgb,var(--brand2) 80%,transparent)}
.tkblok[data-renk="ok"]{background:color-mix(in srgb,#2fbf71 45%,transparent);
  border-color:color-mix(in srgb,#2fbf71 75%,transparent)}
.tkblok[data-renk="warn"]{background:color-mix(in srgb,#e0a13a 45%,transparent);
  border-color:color-mix(in srgb,#e0a13a 75%,transparent)}
.tkblok[data-renk="mor"]{background:color-mix(in srgb,#8b6ee0 45%,transparent);
  border-color:color-mix(in srgb,#8b6ee0 75%,transparent)}
.tkblok[data-renk="alt"]{background:color-mix(in srgb,#d2607a 45%,transparent);
  border-color:color-mix(in srgb,#d2607a 75%,transparent)}

.snkurallar{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.snkurallar h3{margin:0 0 10px;font-size:14px;color:var(--muted);font-weight:600}
.snrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;
  border:1px solid var(--line);border-radius:12px;background:var(--raise);margin-bottom:8px}
.snrow .et{color:var(--muted);font-size:12px}
.snrow select{min-width:150px;flex:1}
.snrow .ok{display:inline-flex;width:16px;height:16px;color:var(--brand2)}
.snrow .ok svg{width:16px;height:16px}

@media (max-width:640px){
  .takvim{grid-template-rows:auto 170px}
  .tkblok{font-size:0}
}

/* Uyumsuz atama rozeti (GÖREV 15a) — mevcut ton dilini sürdürür. */
.chip[data-tone="bad"]{color:var(--bad);border-color:rgba(255,92,92,.35);background:rgba(255,92,92,.10)}


/* ═══ GÖREV 15b · takvim EDİTÖR oluyor ════════════════════════════════════
   220 px'lik bir gün = saat başına 9 px; sürükleyerek düzenlemek imkânsız.
   560 px'te saat ~23 px, 15 dakika ~6 px — kenetlemeyle rahat. */
.takvim{grid-template-rows:auto 560px}

/* VARSAYILAN DOLGU — bugüne kadar eksik olan en önemli bilgi: planların
   kaplamadığı her yerde varsayılan liste çalıyor. İpucu metni yetmiyor,
   görünmesi gerekiyor. */
.tkgun{background:
  repeating-linear-gradient(45deg,
    transparent 0 6px,
    color-mix(in srgb,var(--muted) 8%,transparent) 6px 7px),
  var(--ink2)}
/* Bloklar OPAK olmalı: saydam kalırlarsa varsayılan dolgusunun taraması
   içlerinden geçiyor ve "burada da varsayılan var" gibi okunuyor.
   Renkler `transparent` yerine zeminle karıştırılıyor. */
.tkblok{background:color-mix(in srgb,var(--brand2) 42%,var(--ink2))}
.tkblok[data-renk="ok"]{background:color-mix(in srgb,#2fbf71 38%,var(--ink2))}
.tkblok[data-renk="warn"]{background:color-mix(in srgb,#e0a13a 38%,var(--ink2))}
.tkblok[data-renk="mor"]{background:color-mix(in srgb,#8b6ee0 38%,var(--ink2))}
.tkblok[data-renk="alt"]{background:color-mix(in srgb,#d2607a 38%,var(--ink2))}
.tkgun .tkvarsad{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;font-size:10px;color:var(--muted);opacity:.75;pointer-events:none;
  letter-spacing:.04em}


/* Takvim ile form YAN YANA: körlemesine doldur-aşağı bak-anla döngüsü
   bitiyor, formda değişen değer takvimde anında görünüyor. */
.plduzen{display:grid;grid-template-columns:minmax(320px,1fr) minmax(320px,1fr);
  gap:18px;margin-top:16px;align-items:start}
.plduzen > *{min-width:0}          /* bu satır olmadan panel yatay kayar */
.plduzen .takvim{margin-top:0}
.plyan{display:flex;flex-direction:column;gap:0}
@media (max-width:980px){ .plduzen{grid-template-columns:1fr} }

/* Düzenlenen taslak — kayıtlıların üstünde, belirgin kenarlıklı. */
.tkblok[data-taslak]{outline:2px solid var(--paper);outline-offset:-2px;z-index:3;
  box-shadow:0 2px 10px rgba(0,0,0,.45);font-weight:600}
/* Taslakla kesişen kayıtlı plan — kırmızı, "buraya olmaz" der. */
.tkblok[data-cakisma]{background:color-mix(in srgb,var(--bad) 45%,var(--ink2));
  border-color:color-mix(in srgb,var(--bad) 80%,transparent);z-index:2}

/* Canlı çakışma sebebi — form içinde, kaydetmeden önce. */
.plcakisma{display:flex;gap:8px;align-items:flex-start;margin-top:14px;padding:10px 12px;
  border:1px solid rgba(227,96,63,.35);background:rgba(227,96,63,.10);border-radius:12px;
  color:var(--bad);font-size:13px;line-height:1.45}
.plcakisma .icon{flex:none;width:16px;height:16px;margin-top:1px}
.plcakisma b{color:var(--paper)}

/* "Şu an" çizgisi — bugünün sütununda. */
.tkgun[data-bugun]{outline:1px solid color-mix(in srgb,var(--brand2) 40%,transparent);
  outline-offset:-1px}
.tksimdi{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--bad);
  z-index:4;pointer-events:none}
.tksimdi i{position:absolute;right:2px;top:-14px;font-style:normal;font-size:9px;
  color:var(--bad);background:var(--ink);padding:0 3px;border-radius:3px}

/* Gün ön ayarları */
.gunon{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}

/* Katlanır tarih aralığı */
.plsezon{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:14px;
  background:var(--raise)}
.plsezon summary{cursor:pointer;display:flex;gap:10px;align-items:center;font-size:13px;
  color:var(--muted);list-style:none}
.plsezon summary::-webkit-details-marker{display:none}
.plsezon summary b{margin-left:auto;color:var(--paper);font-weight:600}

/* Zaman kaydırıcısı — üç katmanlı sistemi anlaşılır kılan ekran. */
.plkaydirici{border:1px solid var(--line);border-radius:12px;background:var(--raise);
  padding:12px 14px;margin-top:14px}
.plkaydirici .ust{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px}
.plkaydirici .ust b{color:var(--paper)}
.plkaydirici .ust .btn{margin-left:auto}
.plkaydirici input[type=range]{width:100%;accent-color:var(--brand2)}
.plkaydirici .sonuc{display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap}
.plkaydirici .sonuc .an{font-size:13px;color:var(--muted);min-width:96px}
.plkaydirici .sonuc .an i{font-style:normal;color:var(--brand2)}

/* Sürükleme — imleç ne yapılabileceğini söylesin. */
.tkgun{cursor:crosshair}
.tkblok{cursor:grab;user-select:none}
.tkblok[data-taslak]{cursor:grab}


/* ═══ GÖREV 17 · plan arayüzü okunabilirlik ═══════════════════════════════
   Kullanıcı bildirdi, laboratuvarda ekran görüntüsüyle doğrulandı:
   1) Plan formundaki girişler BEYAZ — satır 92'deki seçici yalnız
      [type=text/number/password]; type'sız girişler ile time/date
      tarayıcı varsayılanında kalıyor, satır 16'daki color:inherit de
      üstüne açık yazıyı basıyor → beyaz üstüne beyaz.
   2) Takvim, kart içi iki sütunda 39 px'lik günlere sıkışıyordu.
   3) Saat cetveli 6 saatte birdi; yarım saatlik çizgi yoktu. */

/* 1 · Girişler karanlık temaya uysun */
input:not([type]),input[type=time],input[type=date]{
  width:100%;padding:9px 11px;border-radius:10px;background:var(--ink);
  border:1px solid var(--line);color:var(--paper);font-size:14px;
}
input[type=time]::-webkit-calendar-picker-indicator,
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.65);opacity:.85;cursor:pointer}
/* Yerli saat/tarih açılırları da karanlık çizilsin */
:root{color-scheme:dark}

/* 2 · Takvim nefes alsın: geniş ekranda 3/5–2/5, darında alt alta;
   takvim gerekirse kendi içinde yatay kayar, panel asla kaymaz. */
.plduzen{grid-template-columns:minmax(0,3fr) minmax(300px,2fr)}
@media (max-width:1500px){ .plduzen{grid-template-columns:1fr} }
.tkkaydir{overflow-x:auto;overscroll-behavior-x:contain;border-radius:8px}
.takvim{min-width:620px;grid-template-rows:auto 576px}  /* 576 = 24 px/saat, çizgiler tam piksele oturur */

/* 3 · Saat ızgarası: tam saatte belirgin, yarım saatte silik çizgi */
.tkgun{background:
  repeating-linear-gradient(to bottom,
    color-mix(in srgb,var(--muted) 16%,transparent) 0 1px,
    transparent 1px calc(100%/24)),
  repeating-linear-gradient(to bottom,
    transparent 0 calc(100%/48 - 1px),
    color-mix(in srgb,var(--muted) 7%,transparent) calc(100%/48 - 1px) calc(100%/48)),
  repeating-linear-gradient(45deg,transparent 0 6px,
    color-mix(in srgb,var(--muted) 8%,transparent) 6px 7px),
  var(--ink2)}
.tksaat{font-size:10px}
.tkblok{font-size:11px;line-height:1.15;padding:3px 4px}


/* Saat etiketleri translateY(-50%) ile çizgiye ortalanıyor; en alttaki
   24:00'ın alt yarısı ızgaranın dışına taşıyor. .tkkaydir yatay kaydırma
   için overflow-x:auto alınca dikey eksen de auto'ya döndü ve o yarım
   satırı kırptı (ölçüldü: içerik 602 px, sargı 596 px). Altına o kadar
   yer bırak — kaydırma kalsın, etiket görünsün. */
.tkkaydir{padding-bottom:8px}


/* ═══ GÖREV 18 · büyük ekran ═════════════════════════════════════════════
   Kullanıcı ekran görüntüsüyle bildirdi: geniş pencerede takvim gene dar
   ve elle kaydırılıyor, yanında koca boşluk var. İki kök sebep:
   1) .pane 1180 px'te kilitli — pencere büyüse de içerik büyümüyordu.
   2) .plduzen'in iki sütuna geçişi PENCEREYE bakıyordu; oysa kartın
      genişliğini pencere değil .pane sınırı belirliyor. Karar artık
      kartın KENDİ genişliğiyle veriliyor (container query). */

@media (min-width:1500px){
  #pane-ekranlar,#pane-sablonlar{max-width:1560px}   /* diğer sekmeler 1180'de kalır */
}

#planKart{container-type:inline-size}
.plduzen{grid-template-columns:1fr}                  /* varsayılan: takvim tam genişlik */
@container (min-width:1120px){
  .plduzen{grid-template-columns:minmax(0,3fr) minmax(300px,2fr)}
}



/* ═══ GÖREV 20 · giriş logosu ═════════════════════════════════════════════
   Logo formun ÜSTÜNDE duruyor; #login bugün yatay ortalanmış bir flex
   kutusu, sütuna çevirmezsek logo formun yanına geçerdi. */
#login{flex-direction:column}
#login .loginlogo{width:200px;max-width:78vw;margin:0 0 26px}
#login .loginlogo svg{width:100%;height:auto;display:block;fill:var(--paper)}

/* ── Ölü senkron eşlemesi (A3-ii) ──────────────────────────────────────────
   Kaynağı takip edilen ekranın listelerinde geçmeyen eşleme hiç tetiklenmez.
   Sessizce ölü kalmasın: satır kendini belli etsin, sebebi altında yazsın. */
.snrow.olu{border-color:var(--bad);background:rgba(227,96,63,.07)}
.snolu {
  flex: 1 0 100%; margin: 6px 0 0; font-size: 12.5px; line-height: 1.5;
  color: var(--bad); display: flex; gap: 7px; align-items: flex-start;
}
.snolu svg { flex: none; width: 15px; height: 15px; margin-top: 2px }

/* ── Android TV kabuğu · sürüm tablosu (Ayarlar) ───────────────────────── */
.ktab{width:100%;border-collapse:collapse;font-size:13px;margin-top:12px}
.ktab th{text-align:left;font-weight:600;color:var(--muted);padding:6px 8px;
  border-bottom:1px solid var(--line);font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase}
.ktab td{padding:8px;border-bottom:1px solid var(--line2);vertical-align:top}
.ktab tr:last-child td{border-bottom:0}
.ktab .muted{color:var(--muted);font-size:11.5px}
.ktab select,.ktab input{background:var(--raise);color:var(--paper);
  border:1px solid var(--line);border-radius:6px;padding:4px 6px;font-size:12.5px}

/* ═══ Reçeteler sekmesi ═══════════════════════════════════════════════════
   Yeni bir tasarım dili yok: kart, rozet, düğme ve alanlar panelin
   mevcut sınıflarıyla çiziliyor. Buradakiler yalnız bu bölümün kendi
   ızgaraları — ürün satırı, reçete satırı, malzeme kütüğü. */

/* Paylaşım linkleri */
.rctok{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--muted);
  background:rgba(0,0,0,.35);padding:2px 7px;border-radius:6px}
.ktab tr.rclink.olu{opacity:.5}
.ktab tr.rclink.olu .btn{opacity:1}
.rctam{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 6px}
.rctam code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;
  background:rgba(0,0,0,.4);padding:6px 10px;border-radius:8px;
  color:var(--paper);word-break:break-all;min-width:0}
.rcnot{display:block;font-size:12px;color:var(--muted);line-height:1.5}

/* Sütun başlıkları — ürün listesi ve reçete satırları aynı dili konuşur */
.rcbas{display:grid;gap:8px;align-items:center;padding:0 10px 8px;
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted2);grid-template-columns:minmax(0,1fr) 116px 132px 128px 86px}
.rcubas{grid-template-columns:minmax(0,1fr) 200px 150px 120px}

/* Ürün satırı — tıklanabilir, düğme olduğu için sıfırlanıyor */
.rcurow{display:grid;gap:8px;align-items:center;width:100%;text-align:left;
  grid-template-columns:minmax(0,1fr) 200px 150px 120px;
  padding:9px 10px;border-radius:12px;border:1px solid transparent;
  background:transparent;color:inherit;font:inherit}
.rcurow:nth-child(odd){background:rgba(255,255,255,.022)}
.rcurow:hover{border-color:var(--line);background:rgba(255,255,255,.05)}
.rcurow[aria-current="true"]{border-color:rgba(46,123,255,.45);background:var(--brand-dim)}
.rcad{font-size:14px;font-weight:600;min-width:0;overflow:hidden}
.rcad small{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:2px}
.rcsay{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.rcsay small{display:block;font-size:11.5px;color:var(--muted2)}

/* Reçete satırı */
.rcolcu{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.04em}
.rcrow{display:grid;gap:8px;align-items:center;
  /* malzeme · miktar · göz kararı · birim · stok · son */
  grid-template-columns:minmax(0,1fr) 116px 40px 132px 128px 86px;
  padding:6px 10px;border-radius:12px;border:1px solid transparent}
.rcrow [data-rc="satir-goz"]{width:36px;height:36px;padding:0;opacity:.45}
.rcrow [data-rc="satir-goz"].rcgoz{
  opacity:1;color:var(--brand2);
  border-color:rgba(59,134,255,.5);background:rgba(59,134,255,.12)}
.rcrow input:disabled{
  color:var(--brand2);opacity:1;font-size:12px;text-align:center;
  background:rgba(59,134,255,.08);border-style:dashed}
.rcrow:nth-child(odd){background:rgba(255,255,255,.022)}
.rcrow:hover{border-color:var(--line)}
.rcrow.elle{border-color:rgba(232,181,74,.35)}
.rcrow input,.rcrow select{padding:7px 9px;font-size:13.5px;border-radius:9px}
.rcstok{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:0}
.rcstok small{display:block;font-size:11px;color:var(--warn)}
.rcson{display:flex;gap:5px;justify-content:flex-end}

/* Malzeme kütüğü */
.rcmrow{border:1px solid var(--line);border-radius:14px;padding:11px 12px;margin-bottom:10px;
  background:rgba(255,255,255,.022)}
.rcmrow.eksik{border-color:rgba(232,181,74,.34)}
.rcmust{display:grid;gap:8px;align-items:center;
  grid-template-columns:minmax(0,1fr) 110px 160px auto}
.rcmust input[type=text],.rcmust select{padding:7px 9px;font-size:13.5px;border-radius:9px}
.rconay{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap}
.rconay input{width:16px;height:16px;accent-color:var(--brand2)}
.rcmalt{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:9px}
.rcyard{font-size:12px;color:var(--muted2)}
.rcalr{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:7px 14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.rcalr label{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.35}
.rcalr input{width:16px;height:16px;flex:none;accent-color:var(--brand2)}
.rcalrson{grid-column:1/-1;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}

/* Dar pencere: ızgaralar tek sütuna iner, hiçbir yerde yatay taşma olmaz */
@media (max-width:820px){
  .rcbas{display:none}
  .rcurow,.rcrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rcurow .rcad,.rcrow > select:first-child{grid-column:1/-1}
  .rcson{grid-column:1/-1;justify-content:flex-start}
  .rcmust{grid-template-columns:minmax(0,1fr)}
}

/* Paylaşım linki tablosu: altı sütun dar pencerede sıkışamıyor. Tablo
   KENDİ kutusunda kayar, sayfa gövdesi yatay kaymaz — takvimdeki
   .tkkaydir ile aynı çözüm. Burada dikey taşan bir şey yok (etiketler
   çizgiye ortalanmıyor), o yüzden ek alt boşluk gerekmiyor. */
.rckaydir{overflow-x:auto;overscroll-behavior-x:contain;border-radius:8px}
.rckaydir .ktab{min-width:520px}

/* Reçete · şef linki kapsam seçicisi (göç 018). Mevcut .chip diline
   yaslanıyor; seçili hâl .catpill'in vurgusunu kullanıyor ki panelde
   ikinci bir seçim dili doğmasın. */
.rckapsam{display:flex;flex-wrap:wrap;gap:6px}
.rckapsam button{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:6px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);
}
.rckapsam button:hover{border-color:var(--line2)}
.rckapsam button.secili{
  background:rgba(46,123,255,.14);border-color:var(--brand2);color:var(--paper);
}
.rckapsam .rckapsamSay{opacity:.65;font-weight:600}
/* Link satırındaki kapsam rozetleri — çok bölümlü linkte satırı şişirmesin. */
.rclink .rckapsamlar{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}

/* Senkrondan türetilen oynatma satırı — salt okunur.
   Düzenlenebilir satırlardan görsel olarak ayrılıyor: kullanıcı neyi
   değiştirebileceğini denemeden anlamalı. */
.oyrow.oysenk{opacity:.82;background:linear-gradient(90deg,rgba(59,134,255,.06),transparent 60%);
  border-style:dashed}
.oyrow.oysenk .no{color:var(--brand2);display:flex;align-items:center;justify-content:center}
.oyrow.oysenk .no .icon{width:16px;height:16px}
.oyrow.oysenk small{display:block;margin-top:4px;color:var(--muted2)}

/* ── Takipçinin etkin listesi (26 Eylül) ─────────────────────────────── */
.oysenkozet{display:flex;gap:10px;align-items:flex-start;margin:14px 0 8px;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--raise);font-size:14px}
.oysenkozet>.icon{color:var(--brand2);flex:none;margin-top:2px}
.oysenkozet small{display:block;margin-top:4px;color:var(--muted);line-height:1.45}
.oyrow.oysenk{padding-top:8px;padding-bottom:8px}
.oyrow.oysenk .no{font-variant-numeric:tabular-nums;color:var(--muted)}