/* ==========================================================================
   Postify — Platform stylesheet (tasarim revizyonu 2026-07-18/19)
   Kaynak: "Postify Platform Tasarımı" prototip paketi (READ-ONLY, kopyalanmadı — elle uyarlandı).
   Yapı: 1) font-face (yerel Outfit)  2) tasarım sistemi tokenları  3) _ds bileşen sınıfları
         4) prototip sayfa CSS'i (nav/hero/section/gallery/plans/auth/onb/dash/responsive)
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Fonts (yerel, hotlink yok) */
@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/outfit/outfit-latin-300.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/outfit/outfit-latin-400.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/outfit/outfit-latin-500.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/outfit/outfit-latin-600.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/outfit/outfit-latin-700.woff2') format('woff2')}

/* ---------------------------------------------------------------- 2. Design system tokens */
:root{
/* Gece mavisi — birincil */
--navy-950:#0A1424;--navy-900:#10203A;--navy-800:#16304F;--navy-700:#1F3F66;--navy-600:#2B5183;--navy-500:#3A66A0;--navy-300:#8FA9C9;--navy-100:#DCE5F0;--navy-50:#F0F4F9;
/* Koyu kahve & bakır — ikincil */
--brown-950:#201510;--brown-900:#33231A;--brown-800:#452F23;--brown-700:#5C3E2C;--brown-600:#7A5334;--brown-500:#96683F;--brown-300:#C4A488;--brown-100:#EBDFD2;--brown-50:#F8F2EA;
/* Nötrler — sıcak kağıt, mavi gölge */
--ink:#171A20;--grey-700:#3E4450;--grey-500:#6B727E;--grey-400:#9AA1AC;--grey-200:#D4D8DE;--grey-100:#EDEFF2;--paper:#F7F6F2;--white:#FFFFFF;
/* Anlamsal */
--success:#2F7D5B;--warning:#B07C2E;--error:#A8402F;--info:var(--navy-600);
/* Roller */
--brand:var(--navy-900);--accent:var(--brown-500);
--text-body:var(--ink);--text-muted:var(--grey-500);--text-inverse:var(--paper);--text-brand:var(--navy-900);
--surface-page:var(--paper);--surface-card:var(--white);--surface-raised:var(--navy-50);--surface-dark:var(--navy-950);--surface-brand:var(--navy-900);
--border-default:var(--grey-200);--border-strong:var(--grey-400);--border-focus:var(--navy-600);
--link:var(--navy-700);--link-hover:var(--navy-500);
/* Yazı tipi */
--font-sans:'Outfit',ui-sans-serif,system-ui,sans-serif;
--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--text-display:clamp(40px,5vw,64px);--text-h1:36px;--text-h2:28px;--text-h3:22px;--text-lg:18px;--text-md:16px;--text-sm:14px;--text-xs:12px;
--weight-display:600;--weight-heading:600;--weight-medium:500;--weight-body:400;
--leading-tight:1.1;--leading-heading:1.25;--leading-body:1.55;
--tracking-display:-0.02em;--tracking-caps:0.08em;
/* Boşluk + köşe */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-pill:999px;
--container-max:1120px;
/* Efektler */
--shadow-sm:0 1px 2px rgba(16,32,58,.08);
--shadow-md:0 4px 12px rgba(16,32,58,.10);
--shadow-lg:0 12px 32px rgba(16,32,58,.16);
--shadow-focus:0 0 0 3px rgba(43,81,131,.30);
--grad-midnight:linear-gradient(160deg,#10203A 0%,#0A1424 60%,#201510 130%);
--grad-copper:linear-gradient(120deg,#96683F,#5C3E2C);
--grad-dawn:linear-gradient(180deg,#F0F4F9,#F8F2EA);
--ease-brand:cubic-bezier(.33,1,.36,1);
--dur-fast:140ms;--dur-med:280ms;--dur-slow:600ms;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper)}
body{font-family:var(--font-sans);color:var(--text-body);font-size:var(--text-md);line-height:var(--leading-body)}
h1,h2,h3,h4{margin:0;font-weight:var(--weight-heading);line-height:var(--leading-heading);color:var(--navy-900)}
p{margin:0;text-wrap:pretty}
a{color:var(--link);text-decoration:none}a:hover{color:var(--link-hover)}
button{white-space:nowrap;font-family:inherit}
.container{max-width:1160px;margin:0 auto;padding:0 24px}
.kicker{display:inline-block;font-size:var(--text-xs);font-weight:500;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--brown-500);margin-bottom:12px}
.kicker-copper{color:var(--brown-300)}
.field-label{display:block;font-size:var(--text-sm);font-weight:500;color:var(--grey-700);margin-bottom:8px}
.hint-text{font-size:var(--text-sm);color:var(--text-muted)}
:focus-visible{outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- 3. Design-system component classes (_ds_bundle.js kbtn/kcard/... adapte) */
.kbadge{font-family:var(--font-sans);display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:3px 10px;border-radius:var(--radius-pill);border:1px solid transparent}
.kbadge-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.kbadge-brand{background:var(--navy-100);color:var(--navy-800)}
.kbadge-accent{background:var(--brown-100);color:var(--brown-700)}
.kbadge-success{background:#E3F0EA;color:var(--success)}
.kbadge-warning{background:#F5EBD9;color:#8A6223}
.kbadge-error{background:#F5E3DF;color:var(--error)}
/* Otomatik hazirlik durumu (2026-07-26) — sakin, dikkat cekmeyen bir bekleme rozeti:
   kullanici bir sey YAPMAYACAK, yalnizca sistemin calistigini bilecek. */
.kbadge-muted{background:var(--surface-2,#EFEDE8);color:var(--text-muted,#6B6B63)}
.kbadge-muted .pulse-dot{width:7px;height:7px;background:currentColor;opacity:.7}
.kbadge-neutral{background:var(--grey-100);color:var(--grey-700)}

.kbtn{font-family:var(--font-sans);font-weight:500;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-md);transition:background var(--dur-fast) var(--ease-brand),box-shadow var(--dur-fast) var(--ease-brand),transform var(--dur-fast) var(--ease-brand),color var(--dur-fast) var(--ease-brand)}
.kbtn:active:not(:disabled){transform:scale(.98)}
.kbtn:focus-visible{box-shadow:var(--shadow-focus)}
.kbtn:disabled{opacity:.45;cursor:not-allowed}
.kbtn-primary{background:var(--navy-900);color:var(--paper)}.kbtn-primary:hover:not(:disabled){background:var(--navy-800);box-shadow:var(--shadow-md)}.kbtn-primary:active:not(:disabled){background:var(--navy-950)}
.kbtn-accent{background:var(--brown-500);color:var(--paper)}.kbtn-accent:hover:not(:disabled){background:var(--brown-600);box-shadow:var(--shadow-md)}
.kbtn-secondary{background:transparent;color:var(--navy-900);border-color:var(--navy-300)}.kbtn-secondary:hover:not(:disabled){background:var(--navy-50);border-color:var(--navy-500)}
.kbtn-ghost{background:transparent;color:var(--navy-800)}.kbtn-ghost:hover:not(:disabled){background:var(--navy-50)}
.kbtn-inverse{background:var(--paper);color:var(--navy-900)}.kbtn-inverse:hover:not(:disabled){background:#fff;box-shadow:var(--shadow-md)}
.kbtn-danger{background:var(--error);color:var(--paper)}.kbtn-danger:hover:not(:disabled){filter:brightness(.9);box-shadow:var(--shadow-md)}
.kbtn-danger-ghost{background:transparent;color:var(--error);border-color:var(--error)}.kbtn-danger-ghost:hover:not(:disabled){background:#F5E3DF}
.kbtn-sm{font-size:13px;padding:6px 14px}.kbtn-md{font-size:15px;padding:10px 20px}.kbtn-lg{font-size:16px;padding:13px 26px;border-radius:12px}

.kcard{font-family:var(--font-sans);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:box-shadow var(--dur-med) var(--ease-brand),transform var(--dur-med) var(--ease-brand)}
.kcard[data-interactive]{cursor:pointer}
.kcard[data-interactive]:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.kcard-dark{background:var(--grad-midnight);border:none;color:var(--paper)}
.kcard-pad-md{padding:var(--space-5)}.kcard-pad-lg{padding:var(--space-6)}.kcard-pad-none{padding:0;overflow:hidden}
/* Tehlikeli bölge (Abonelik — mağaza silme) — mevcut --error token, yeni renk YOK. */
.danger-zone{border-color:var(--error)}
.danger-zone h3{color:var(--error)}

.kibtn{font-family:var(--font-sans);display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;cursor:pointer;border-radius:var(--radius-md);transition:background var(--dur-fast) var(--ease-brand),transform var(--dur-fast) var(--ease-brand)}
.kibtn:active{transform:scale(.96)}.kibtn:focus-visible{box-shadow:var(--shadow-focus)}
.kibtn-solid{background:var(--navy-900);color:var(--paper)}.kibtn-solid:hover{background:var(--navy-800)}
.kibtn-soft{background:var(--navy-50);color:var(--navy-800)}.kibtn-soft:hover{background:var(--navy-100)}
.kibtn-ghost{background:transparent;color:var(--grey-500)}.kibtn-ghost:hover{background:var(--navy-50);color:var(--navy-800)}
.kibtn-sm{width:30px;height:30px}.kibtn-md{width:38px;height:38px}.kibtn-lg{width:46px;height:46px}

.ktabs{font-family:var(--font-sans);display:flex;gap:4px;border-bottom:1px solid var(--border-default)}
.ktab{background:none;border:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;color:var(--grey-500);padding:10px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-fast) var(--ease-brand),border-color var(--dur-fast) var(--ease-brand)}
.ktab:hover{color:var(--navy-800)}
.ktab[aria-selected="true"]{color:var(--navy-900);border-bottom-color:var(--brown-500)}

.ktag{font-family:var(--font-sans);display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:5px 12px;border-radius:var(--radius-pill);background:var(--paper);border:1px solid var(--grey-200);color:var(--grey-700);cursor:default;transition:border-color var(--dur-fast) var(--ease-brand),background var(--dur-fast) var(--ease-brand)}
.ktag-x{border:none;background:none;cursor:pointer;color:var(--grey-400);font-size:14px;line-height:1;padding:0;font-family:inherit}
.ktag-x:hover{color:var(--error)}
.ktag[data-interactive]:hover{border-color:var(--navy-500);background:var(--navy-50);color:var(--navy-800)}

.kdlg-veil{position:fixed;inset:0;background:rgba(10,20,36,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;animation:kdlg-fade var(--dur-med) var(--ease-brand)}
.kdlg{font-family:var(--font-sans);background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);max-width:440px;width:calc(100% - 48px);padding:var(--space-6);animation:kdlg-rise var(--dur-med) var(--ease-brand);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain}
.kdlg-title{font-size:20px;font-weight:600;color:var(--navy-900);margin:0 0 8px}
.kdlg-body{font-size:14px;line-height:1.55;color:var(--grey-700);margin:0 0 20px}
/* Aksiyon satırı — hairline ayraç ile gövdeden ayrılır (--border-default, .kcard ile AYNI
   token), butonlar 2 VEYA 3'lü her durumda düzgün hizalanır (kbtn-sm/-md/-lg boyut sınıfı
   VERİLMEDEN kullanılan tüm kdlg-actions çağrıları için tutarlı yükseklik/dolgu — bkz.
   openOnaylarDetail vb.). flex-wrap:wrap dar genişlikte taşmayı engeller; 480px altında
   sütuna döner (bkz. aşağıdaki medya sorgusu). */
.kdlg-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--border-default)}
.kdlg-actions .kbtn{font-size:15px;padding:10px 20px}
/* Yıkıcı aksiyon (Reddet vb.) sola çıpalanır — .kdlg-actions-danger-left yardımcı sınıfı
   (bkz. openOnaylarDetail) margin-right:auto ile birincil/ikincil aksiyonlardan ayrışır. */
.kdlg-actions .kdlg-danger-left{margin-right:auto}
@media(max-width:480px){.kdlg-actions{flex-direction:column-reverse}.kdlg-actions .kbtn{width:100%;justify-content:center}.kdlg-actions .kdlg-danger-left{margin-right:0}}
@keyframes kdlg-fade{from{opacity:0}}
@keyframes kdlg-rise{from{opacity:0;transform:translateY(12px)}}

.ktoast{font-family:var(--font-sans);display:inline-flex;align-items:center;gap:12px;background:var(--navy-950);color:var(--paper);border-radius:var(--radius-md);padding:12px 16px;box-shadow:var(--shadow-lg);font-size:14px;animation:ktoast-in var(--dur-med) var(--ease-brand);position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200}
.ktoast-bar{width:3px;align-self:stretch;border-radius:2px;flex:none}
.ktoast-x{background:none;border:none;color:var(--navy-300);cursor:pointer;font-size:16px;line-height:1;padding:2px;font-family:inherit}
.ktoast-x:hover{color:var(--paper)}
@keyframes ktoast-in{from{opacity:0;transform:translate(-50%,8px)}}

.kcheck{font-family:var(--font-sans);display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14px;line-height:1.4}
.kcheck input{position:absolute;opacity:0;width:0}
.kcheck-box{width:18px;height:18px;flex:none;border:1.5px solid var(--grey-400);border-radius:5px;display:inline-flex;align-items:center;justify-content:center;background:#fff;transition:background var(--dur-fast) var(--ease-brand),border-color var(--dur-fast) var(--ease-brand);margin-top:1px}
.kcheck-box svg{opacity:0;transform:scale(.6);transition:all var(--dur-fast) var(--ease-brand);color:#fff}
.kcheck input:checked+.kcheck-box{background:var(--navy-900);border-color:var(--navy-900)}
.kcheck input:checked+.kcheck-box svg{opacity:1;transform:scale(1)}
.kcheck input:focus-visible+.kcheck-box{box-shadow:var(--shadow-focus)}
.kcheck:hover .kcheck-box{border-color:var(--navy-600)}

.kfield{font-family:var(--font-sans);display:flex;flex-direction:column;gap:6px}
.kfield-label{font-size:14px;font-weight:500;color:var(--navy-900)}
.kfield-hint{font-size:12px;color:var(--text-muted)}
.kfield-err{font-size:12px;color:var(--error)}
.kinput{font-family:var(--font-sans);font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--grey-200);border-radius:var(--radius-md);padding:10px 14px;transition:border-color var(--dur-fast) var(--ease-brand),box-shadow var(--dur-fast) var(--ease-brand);width:100%;box-sizing:border-box}
.kinput::placeholder{color:var(--grey-400)}
.kinput:hover{border-color:var(--grey-400)}
.kinput:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--shadow-focus)}
.kinput[data-error]{border-color:var(--error)}
.kinput:disabled{background:var(--grey-100);color:var(--grey-400);cursor:not-allowed}
textarea.kinput{resize:vertical;min-height:88px}

.kradio{font-family:var(--font-sans);display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.kradio input{position:absolute;opacity:0;width:0}
.kradio-dot{width:18px;height:18px;flex:none;border:1.5px solid var(--grey-400);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#fff;transition:border-color var(--dur-fast) var(--ease-brand)}
.kradio-dot::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--navy-900);transform:scale(0);transition:transform var(--dur-fast) var(--ease-brand)}
.kradio input:checked+.kradio-dot{border-color:var(--navy-900)}
.kradio input:checked+.kradio-dot::after{transform:scale(1)}
.kradio input:focus-visible+.kradio-dot{box-shadow:var(--shadow-focus)}
.kradio:hover .kradio-dot{border-color:var(--navy-600)}

.kselwrap{position:relative;display:block}
.kselwrap svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--grey-500)}
select.kinput{appearance:none;padding-right:36px;cursor:pointer}

.kswitch{font-family:var(--font-sans);display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.kswitch input{position:absolute;opacity:0;width:0}
.kswitch-track{width:38px;height:22px;flex:none;border-radius:var(--radius-pill);background:var(--grey-200);position:relative;transition:background var(--dur-med) var(--ease-brand)}
.kswitch-track::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--dur-med) var(--ease-brand)}
.kswitch input:checked+.kswitch-track{background:var(--navy-900)}
.kswitch input:checked+.kswitch-track::after{transform:translateX(16px)}
.kswitch input:focus-visible+.kswitch-track{box-shadow:var(--shadow-focus)}

/* ---------------------------------------------------------------- 4. Prototip sayfa CSS'i (birebir class adları) */
/* nav */
.site-nav{position:sticky;top:0;z-index:50;background:rgba(247,246,242,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-default)}
.nav-dark{background:rgba(10,20,36,.75);border-bottom:1px solid rgba(247,246,242,.1)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px}
.nav-links{display:flex;gap:28px;font-size:var(--text-sm);font-weight:500}
.nav-links a{color:var(--grey-700)}.nav-dark .nav-links a{color:rgba(247,246,242,.85)}
.nav-links a:hover{color:var(--navy-900)}.nav-dark .nav-links a:hover{color:var(--white)}
.nav-actions{display:flex;gap:10px;align-items:center}
.nav-burger{display:none;background:none;border:none;color:inherit;cursor:pointer;padding:6px}
.nav-dark .nav-burger{color:var(--paper)}
/* hero */
.hero{position:relative;min-height:640px;display:flex;align-items:center;background:var(--grad-midnight);overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,20,36,.88) 25%,rgba(10,20,36,.45) 70%,rgba(32,21,16,.35))}
.hero-inner{position:relative;padding-top:96px;padding-bottom:96px;max-width:1160px}
.hero h1{color:var(--paper);font-size:var(--text-display);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);line-height:var(--leading-tight);max-width:15ch}
.hero p{color:rgba(247,246,242,.8);font-size:var(--text-lg);max-width:48ch;margin-top:20px}
.hero-cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.hero-meta{display:flex;gap:28px;margin-top:44px;flex-wrap:wrap}
.hero-meta span{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-sm);color:rgba(247,246,242,.7)}
/* sections */
.section{padding:88px 0}
.sec-dawn{background:var(--grad-dawn)}
.sec-head{max-width:640px;margin-bottom:44px}
.sec-head h1,.sec-head h2{font-size:var(--text-h1);letter-spacing:var(--tracking-display)}
.sec-head p{color:var(--text-muted);margin-top:12px;font-size:var(--text-lg)}
.page-head-pad{padding-top:56px}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.steps-grid h3{font-size:var(--text-h3);margin:14px 0 8px}
.steps-grid p{color:var(--text-muted);font-size:var(--text-sm)}
.step-num{font-size:var(--text-xs);font-weight:500;letter-spacing:var(--tracking-caps);color:var(--grey-400);margin-bottom:16px}
/* gallery */
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:32px}
.ph-tile{position:relative;margin:0;border-radius:var(--radius-lg,16px);overflow:hidden;display:flex;align-items:flex-end;box-shadow:var(--shadow-sm);transition:box-shadow var(--dur-med) var(--ease-brand),transform var(--dur-med) var(--ease-brand)}
.ph-tile:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.ph-init{position:absolute;top:14px;left:16px;color:rgba(247,246,242,.55);font-weight:600;font-size:22px;letter-spacing:.02em}
.ph-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(247,246,242,.15);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;color:var(--paper)}
.ph-dur{position:absolute;top:14px;right:14px;background:rgba(10,20,36,.55);color:var(--paper);font-size:var(--text-xs);padding:3px 8px;border-radius:999px}
.ph-tile figcaption{width:100%;padding:36px 16px 14px;background:linear-gradient(transparent,rgba(10,20,36,.75));display:flex;flex-direction:column;gap:2px}
.ph-tile figcaption strong{color:var(--paper);font-size:var(--text-sm);font-weight:500}
.ph-tile figcaption span{color:rgba(247,246,242,.7);font-size:var(--text-xs)}
.gal-more{display:flex;justify-content:center;margin-top:36px}
/* plans */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.plan-card{background:var(--white);border:1px solid var(--border-default);border-radius:var(--radius-lg,16px);padding:32px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:14px}
.plan-pop{border-color:var(--navy-100);box-shadow:var(--shadow-md);position:relative}
.plan-card h3{font-size:var(--text-h3)}
.plan-tag{color:var(--text-muted);font-size:var(--text-sm)}
.plan-price{font-size:40px;font-weight:600;color:var(--navy-900);letter-spacing:-.02em}
.plan-price span{font-size:var(--text-md);font-weight:400;color:var(--text-muted)}
.plan-card ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:var(--text-sm)}
.plan-card li{display:flex;align-items:center;gap:10px}
.plan-miss{color:var(--grey-400)}
.plans-compact .plan-price{font-size:30px}
/* compare + faq */
.compare-wrap{margin:64px 0;overflow-x:auto}
.compare{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--border-default);border-radius:var(--radius-lg,16px);overflow:hidden;font-size:var(--text-sm)}
.compare th,.compare td{padding:14px 20px;text-align:left;border-bottom:1px solid var(--grey-100)}
.compare th{background:var(--navy-50);font-weight:500;color:var(--navy-900)}
.compare td:first-child{color:var(--grey-700);font-weight:500}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.faq-q{font-size:var(--text-md);margin-bottom:8px}
.faq-grid p{color:var(--text-muted);font-size:var(--text-sm)}
/* about + cta */
.about-band{position:relative;min-height:420px;display:flex;align-items:center;overflow:hidden}
.about-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,20,36,.9) 30%,rgba(10,20,36,.5))}
.about-inner{position:relative;padding-top:72px;padding-bottom:72px}
.about-inner h2{color:var(--paper);font-size:var(--text-h1);letter-spacing:var(--tracking-display);max-width:20ch}
.about-inner p{color:rgba(247,246,242,.8);max-width:52ch;margin-top:16px}
.cta-band{background:var(--grad-midnight);padding:88px 0}
.cta-inner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.cta-inner h2{color:var(--paper);font-size:var(--text-h1);letter-spacing:var(--tracking-display)}
.cta-inner p{color:rgba(247,246,242,.75);margin-bottom:16px}
/* footer */
.site-footer{background:var(--navy-950);color:rgba(247,246,242,.75);padding:64px 0 28px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.foot-grid p{font-size:var(--text-sm);margin-top:16px;max-width:30ch}
.foot-grid h4{color:var(--paper);font-size:var(--text-sm);margin-bottom:14px}
.foot-grid a{display:block;color:rgba(247,246,242,.65);font-size:var(--text-sm);margin-bottom:10px}
.foot-grid a:hover{color:var(--paper)}
.foot-social{display:flex;gap:14px;margin-top:6px;color:rgba(247,246,242,.6)}
.foot-bottom{display:flex;justify-content:space-between;margin-top:48px;padding-top:24px;border-top:1px solid rgba(247,246,242,.12);font-size:var(--text-xs);color:rgba(247,246,242,.5)}
/* auth */
.auth-page{display:grid;grid-template-columns:420px 1fr;min-height:100vh}
.auth-side{background:var(--grad-midnight);padding:40px;display:flex;flex-direction:column;justify-content:space-between}
.auth-side-body h2{color:var(--paper);font-size:var(--text-h2);letter-spacing:var(--tracking-display);max-width:14ch}
.auth-side-body p{color:rgba(247,246,242,.7);margin-top:14px;max-width:32ch}
.auth-side-foot{font-size:var(--text-xs);color:rgba(247,246,242,.5)}
.auth-main{display:flex;align-items:center;justify-content:center;padding:48px 24px}
.auth-card{width:100%;max-width:420px}
.auth-card h1{font-size:var(--text-h2);letter-spacing:var(--tracking-display)}
.auth-sub{color:var(--text-muted);margin:8px 0 24px;font-size:var(--text-sm)}
.auth-alt{font-size:var(--text-sm);color:var(--text-muted);text-align:center}
.auth-error{font-size:var(--text-sm);color:var(--error);background:#F5E3DF;border-radius:var(--radius-md);padding:10px 14px}
.form-col{display:flex;flex-direction:column;gap:18px}
.form-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-row-split{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-sm)}
/* onboarding */
.onb-page{min-height:100vh;background:var(--grad-dawn)}
.onb-head{display:flex;align-items:center;justify-content:space-between;padding-top:28px;padding-bottom:28px;flex-wrap:wrap;gap:16px}
.onb-steps{display:flex;gap:24px;list-style:none;margin:0;padding:0;font-size:var(--text-sm);color:var(--grey-500)}
.onb-steps li{display:flex;align-items:center;gap:8px}
.onb-steps .cur{color:var(--navy-900);font-weight:500}
.onb-steps .done{color:var(--success)}
.onb-dot{width:24px;height:24px;border-radius:50%;border:1px solid var(--grey-200);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);background:var(--white)}
.cur .onb-dot{background:var(--navy-900);color:var(--paper);border-color:var(--navy-900)}
.done .onb-dot{background:var(--success);color:var(--white);border-color:var(--success)}
.onb-body{max-width:720px;padding-bottom:80px}
.onb-body h2{font-size:var(--text-h2);letter-spacing:var(--tracking-display)}
.onb-nav{display:flex;justify-content:space-between;margin-top:32px}
.logo-drop{border:1.5px dashed var(--grey-200);border-radius:var(--radius-lg,16px);padding:32px;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--grey-500);background:var(--navy-50);cursor:pointer;text-align:center}
.logo-drop strong{color:var(--navy-900);font-weight:500}
.logo-drop span{font-size:var(--text-xs)}
.palette-row{display:flex;gap:14px;flex-wrap:wrap}
.palette-opt{display:flex;border:2px solid var(--grey-200);border-radius:10px;overflow:hidden;padding:0;cursor:pointer;background:none;transition:border-color var(--dur-fast) var(--ease-brand)}
.palette-opt span{width:44px;height:44px;display:block}
.palette-opt.sel{border-color:var(--navy-600);box-shadow:var(--shadow-focus)}
.radio-col{display:flex;flex-direction:column;gap:12px}
.onb-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.onb-plan{background:var(--white);border:2px solid var(--grey-200);border-radius:var(--radius-lg,16px);padding:20px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:8px;font-family:inherit;transition:border-color var(--dur-fast) var(--ease-brand)}
.onb-plan.sel{border-color:var(--navy-600);box-shadow:var(--shadow-focus)}
.onb-plan-head{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-md)}
.onb-plan-price{font-size:26px;font-weight:600;color:var(--navy-900)}
.onb-plan-price em{font-style:normal;font-size:var(--text-sm);font-weight:400;color:var(--text-muted)}
.onb-plan-tag{font-size:var(--text-xs);color:var(--text-muted)}
/* dashboard */
.dash{display:grid;grid-template-columns:260px 1fr;min-height:100vh;background:var(--paper)}
.dash-side{background:var(--grad-midnight);display:flex;flex-direction:column;padding:24px 16px;gap:24px;position:sticky;top:0;height:100vh}
.dash-logo{padding:0 8px}
.co-switch{display:flex;flex-direction:column;gap:8px;padding:0 8px}
.field-label-inv{font-size:var(--text-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:rgba(247,246,242,.5);font-weight:500}
.co-switch select{background:rgba(247,246,242,.08);border:1px solid rgba(247,246,242,.15);color:var(--paper);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:var(--text-sm)}
.co-switch select option{color:var(--ink)}
.co-add{background:none;border:none;color:var(--brown-300);font-family:inherit;font-size:var(--text-sm);display:flex;align-items:center;gap:6px;cursor:pointer;padding:4px 0}
.co-add:hover{color:var(--brown-100)}
.dash-nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
.dash-nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:rgba(247,246,242,.75);font-size:var(--text-sm);font-weight:500;transition:background var(--dur-fast) var(--ease-brand)}
.dash-nav a:hover{background:rgba(247,246,242,.06);color:var(--paper)}
.dash-nav a.cur{background:rgba(247,246,242,.1);color:var(--paper)}
.dash-user{display:flex;align-items:center;gap:10px;padding:12px 8px 0;border-top:1px solid rgba(247,246,242,.12)}
.dash-user span:nth-child(2){display:flex;flex-direction:column;flex:1;min-width:0}
.dash-user strong{color:var(--paper);font-size:var(--text-sm);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-user em{font-style:normal;font-size:var(--text-xs);color:rgba(247,246,242,.55)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--brown-500);color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:600;flex:none}
.dash-main{display:flex;flex-direction:column;min-width:0}
.dash-top{display:flex;align-items:center;gap:16px;padding:24px 32px;border-bottom:1px solid var(--border-default);background:var(--white)}
.dash-top>div{flex:1;min-width:0}
.dash-top h1{font-size:var(--text-h3)}
.dash-co{font-size:var(--text-sm);color:var(--text-muted)}
.dash-burger{color:var(--navy-900);display:none}
.dash-body{padding:32px;max-width:1080px;width:100%}
.view-col{display:flex;flex-direction:column;gap:24px}
.view-col-sm{display:flex;flex-direction:column;gap:14px}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stat-label{display:block;font-size:var(--text-sm);color:var(--text-muted);margin-bottom:6px}
.stat-num{font-size:34px;font-weight:600;color:var(--navy-900);letter-spacing:-.02em;display:block;margin-bottom:12px}
.stat-ok{color:var(--success);display:flex;align-items:center;gap:8px;font-size:22px}
.stat-link{font-size:var(--text-sm);display:inline-flex;align-items:center;gap:6px}
.usage-top{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--text-muted);margin-bottom:6px}
.usage-top strong{color:var(--grey-700);font-weight:500}
.usage-track{height:6px;border-radius:999px;background:var(--grey-100);overflow:hidden}
.usage-fill{height:100%;border-radius:999px;background:var(--navy-600)}
.usage-wrap{display:flex;flex-direction:column;gap:16px;margin-top:20px}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quick-card{display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--border-default);border-radius:var(--radius-lg,16px);padding:20px;cursor:pointer;font-family:inherit;text-align:left;box-shadow:var(--shadow-sm);color:var(--brown-500);transition:box-shadow var(--dur-med) var(--ease-brand)}
.quick-card:hover{box-shadow:var(--shadow-md)}
.quick-card span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:2px}
.quick-card strong{color:var(--navy-900);font-size:var(--text-sm);font-weight:500}
.quick-card em{font-style:normal;font-size:var(--text-xs);color:var(--text-muted)}
.quick-card>svg:last-child{color:var(--grey-400)}
.sec-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sec-row h3{font-size:var(--text-h3)}
.item-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.onay-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.item-tile{position:relative}
.item-tile .tile-acts{position:absolute;top:10px;right:10px;display:flex;gap:6px;opacity:0;transition:opacity var(--dur-fast) var(--ease-brand)}
.item-tile:hover .tile-acts{opacity:1}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.card-head h3{font-size:var(--text-h3)}
.card-foot{display:flex;gap:12px;margin-top:20px}
.brand-logo-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.brand-logo-box{width:96px;height:96px;border-radius:var(--radius-lg,16px);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:600;border:1px solid var(--border-default)}
.swatch-row{display:flex;gap:20px;flex-wrap:wrap}
.swatch{display:flex;flex-direction:column;gap:6px;font-size:var(--text-xs)}
.swatch span{width:88px;height:56px;border-radius:10px;border:1px solid var(--border-default)}
.swatch code{font-family:var(--font-mono);color:var(--grey-700)}
.swatch em{font-style:normal;color:var(--text-muted)}
.tone-row{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.social-col{display:flex;flex-direction:column;gap:16px;margin-top:20px}
.social-row{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:end}
.social-ic{width:44px;height:44px;border-radius:10px;background:var(--navy-50);color:var(--navy-700);display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.social-row>span:last-child{margin-bottom:10px}
.site-preview{border:1px solid var(--border-default);border-radius:var(--radius-lg,16px);overflow:hidden}
.site-bar{display:flex;align-items:center;gap:6px;background:var(--grey-100);padding:10px 14px}
.site-bar span{width:9px;height:9px;border-radius:50%;background:var(--grey-200)}
.site-bar code{margin-left:12px;font-size:var(--text-xs);color:var(--grey-500);background:var(--white);border-radius:999px;padding:3px 12px;font-family:var(--font-mono)}
.site-mock{min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--paper)}
.site-mock strong{font-size:24px;font-weight:600}
.site-mock em{font-style:normal;font-size:var(--text-sm);opacity:.75}
.site-mock-btn{margin-top:14px;background:var(--paper);border-radius:10px;padding:8px 18px;font-size:var(--text-sm);font-weight:500}
.page-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:var(--text-sm)}
.page-list li{display:flex;align-items:center;gap:10px}
.quote-row{display:flex;align-items:center;gap:12px;background:var(--navy-50);border-radius:10px;padding:14px;color:var(--navy-700)}
.quote-row span{flex:1;display:flex;flex-direction:column}
.quote-row strong{font-size:var(--text-sm);color:var(--navy-900);font-weight:500}
.quote-row em{font-style:normal;font-size:var(--text-xs);color:var(--text-muted)}
.fmt-row{display:flex;gap:8px;flex-wrap:wrap}
.fmt-opt{border:1.5px solid var(--grey-200);background:var(--white);border-radius:10px;padding:8px 14px;font-family:inherit;font-size:var(--text-sm);cursor:pointer;color:var(--grey-700);transition:border-color var(--dur-fast) var(--ease-brand)}
.fmt-opt.sel{border-color:var(--navy-600);color:var(--navy-900);background:var(--navy-50)}
.gen-empty{border:1.5px dashed var(--grey-200);border-radius:var(--radius-lg,16px);min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--grey-400);padding:32px;text-align:center}
.gen-empty p{max-width:36ch;font-size:var(--text-sm)}
.gen-busy{border:1px solid var(--border-default);background:var(--white);border-radius:var(--radius-lg,16px);min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.gen-busy em{font-style:normal;font-size:var(--text-sm);color:var(--text-muted)}
/* "Uret" ekrani (2026-07-20) — girdiler USTTE, GENIS onizleme ALTTA (Erman karari: eski dar
   yan-panel yerine); onizleme grid'i 1 oge=tam genislik, 2-4=2 sutun (mobilde alt alta). */
.uret-opts-row{display:flex;gap:24px;flex-wrap:wrap}
.uret-opts-row>div{min-width:160px}
.uret-grid{display:grid;gap:16px;grid-template-columns:1fr}
.uret-grid-2{grid-template-columns:repeat(2,1fr)}
.uret-item-media{width:100%;max-height:60vh;overflow:hidden;border-radius:var(--radius-lg,16px);background:var(--navy-50);display:flex;align-items:center;justify-content:center}
.uret-item-media img{max-width:100%;max-height:60vh;object-fit:contain;display:block}
.uret-item-media[role="button"]{cursor:pointer}
.uret-item-media[role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:760px){.uret-grid-2{grid-template-columns:1fr}}
.pulse-dot{width:16px;height:16px;border-radius:50%;background:var(--brown-500);animation:kpulse 1.2s var(--ease-brand) infinite}
@keyframes kpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.45}}
.lock-box{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 24px;text-align:center;color:var(--grey-500)}
.lock-box h3{font-size:var(--text-h3)}
.sub-row{display:flex;gap:48px;flex-wrap:wrap}
.sub-row strong{font-size:var(--text-lg);color:var(--navy-900)}
.bill-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.bill-table td{padding:12px 4px;border-bottom:1px solid var(--grey-100)}
.bill-table td:last-child{text-align:right}
/* stub view (Phase A placeholder) */
.stub-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:64px 24px;color:var(--grey-500)}
.stub-card svg{color:var(--grey-400)}
.stub-card h3{font-size:var(--text-h3);color:var(--navy-900)}
/* dash overlay (mobile) */
.dash-overlay{display:none}
/* responsive */
@media(max-width:960px){
.gal-grid{grid-template-columns:repeat(2,1fr)}
.steps-grid,.plans-grid,.stat-grid,.quick-grid,.onb-plans{grid-template-columns:1fr}
.item-grid{grid-template-columns:repeat(2,1fr)}
.faq-grid,.form-grid2{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr 1fr}
.auth-page{grid-template-columns:1fr}
.auth-side{flex-direction:row;align-items:center;gap:20px;padding:20px 24px}
.auth-side-body{display:none}.auth-side-foot{display:none}
.nav-links{position:fixed;inset:64px 0 auto 0;background:var(--paper);flex-direction:column;gap:0;padding:12px 24px;border-bottom:1px solid var(--border-default);display:none;box-shadow:var(--shadow-lg)}
.nav-links.open{display:flex}
.nav-links a{padding:14px 0;color:var(--grey-700)!important;border-bottom:1px solid var(--grey-100)}
.nav-burger{display:block}
.nav-actions .nav-act-login{display:none}
.dash{grid-template-columns:1fr}
.dash-side{position:fixed;inset:0 auto 0 0;width:280px;z-index:60;transform:translateX(-100%);transition:transform var(--dur-med) var(--ease-brand);height:100vh}
.dash-side.open{transform:none;box-shadow:var(--shadow-lg)}
.dash-overlay{display:none;position:fixed;inset:0;background:rgba(10,20,36,.4);z-index:55}
.dash-overlay.open{display:block}
.dash-top{padding:16px 20px}
.dash-burger{display:inline-flex}
.dash-body{padding:20px}
.hero h1{font-size:40px}
.section{padding:56px 0}
.compare th,.compare td{padding:10px 12px}
}
@media(max-width:560px){.gal-grid,.item-grid,.onay-grid{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr}.sub-row{gap:24px}}

/* ---------------------------------------------------------------- 5. Faz B — gercek mekanik ek siniflari */
/* small square product thumbnail (site list rows + picker cards) */
.prod-thumb{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--navy-50);color:var(--navy-700);font-weight:600;font-size:15px}
.prod-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.prod-thumb-ph{background:var(--navy-50)}
/* product picker (gorsel/video urun sec + web sitesi listesi ortak) */
.prod-pick-toolbar{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.prod-pick-search{position:relative}
.prod-pick-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--grey-400)}
.prod-pick-search input{padding-left:36px}
.cat-chip-row{display:flex;flex-wrap:wrap;gap:8px}
.cat-chip{font-family:var(--font-sans);border:1.5px solid var(--grey-200);background:var(--white);border-radius:999px;padding:5px 13px;font-size:13px;cursor:pointer;color:var(--grey-700);transition:border-color var(--dur-fast) var(--ease-brand)}
.cat-chip[aria-pressed="true"]{border-color:var(--navy-600);background:var(--navy-50);color:var(--navy-900)}
.cat-chip-new{border-style:dashed}
.prod-pick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mu-scene-row{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.mu-scene-themecol{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:8px}
.mu-scene-pickcol{flex:0 1 250px;min-width:0;display:flex;flex-direction:column;gap:10px}
/* Ürün seçici carousel — her ekranda 1 büyük görsel kartı, kaydırınca görünen ürün seçili. */
.mu-carousel{position:relative;width:100%}
.mu-carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;border-radius:var(--radius-lg,16px);scrollbar-width:none;-ms-overflow-style:none}
.mu-carousel-track::-webkit-scrollbar{display:none}
.mu-carousel-slide{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;gap:8px}
.mu-carousel-slide .prod-ready-media{width:100%;aspect-ratio:1;border-radius:var(--radius-lg,16px);border:1.5px solid var(--grey-200);font-size:40px}
.mu-carousel-slide .prod-ready-name{text-align:center;font-size:14px}
.mu-carousel-nav{position:absolute;top:38%;transform:translateY(-50%);z-index:2;width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.94);box-shadow:var(--shadow-md);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--navy-800);transition:background var(--dur-fast) var(--ease-brand)}
.mu-carousel-nav:hover{background:#fff}
.mu-carousel-prev{left:8px}
.mu-carousel-next{right:8px}
.mu-carousel-dots{display:flex;justify-content:center;gap:7px;margin-top:4px}
.mu-carousel-dot{width:8px;height:8px;border-radius:50%;background:var(--navy-200,#b9c2d0);cursor:pointer;transition:background var(--dur-fast) var(--ease-brand),transform var(--dur-fast) var(--ease-brand)}
.mu-carousel-dot.on{background:var(--navy-700);transform:scale(1.3)}
.prod-pick-card{display:flex;align-items:center;gap:10px;background:var(--white);border:1.5px solid var(--grey-200);border-radius:var(--radius-md);padding:10px;cursor:pointer;font-family:inherit;text-align:left;white-space:normal;transition:border-color var(--dur-fast) var(--ease-brand),background var(--dur-fast) var(--ease-brand);min-width:0;max-width:100%}
.prod-pick-card:hover{border-color:var(--navy-300)}
.prod-pick-card[aria-pressed="true"]{border-color:var(--navy-600);background:var(--navy-50)}
/* Mockup urun secici — hazir olmayan urunler SOLUK + tiklanamaz (MOCKUP SISTEMI 2026-07-23) */
.prod-pick-card:disabled,.prod-pick-card.is-disabled{opacity:.45;cursor:not-allowed}
.prod-pick-card:disabled:hover{border-color:var(--grey-200)}
.prod-pick-card .ppc-txt span{font-size:11px;color:var(--warning)}
.prod-pick-card .ppc-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.prod-pick-card .ppc-txt b{font-size:13px;font-weight:500;color:var(--navy-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.prod-pick-card .ppc-txt span{font-size:11px;color:var(--text-muted);overflow-wrap:anywhere}
.prod-pick-add{display:flex;align-items:center;justify-content:center;gap:6px;border:1.5px dashed var(--grey-200);background:none;border-radius:var(--radius-md);padding:10px;cursor:pointer;color:var(--grey-500);font-family:inherit;font-size:13px}
.prod-pick-add:hover{border-color:var(--navy-400);color:var(--navy-700)}
.ghost-card{display:flex;align-items:center;gap:10px;border:1.5px dashed var(--grey-200);border-radius:var(--radius-md);padding:10px;background:var(--navy-50)}
.ghost-card .ppc-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.ghost-card .ppc-txt b{font-size:13px;font-weight:500;color:var(--navy-900)}
.ghost-card .ppc-txt em{font-style:normal;font-size:11px;color:var(--text-muted)}
.ghost-card .ghost-acts{display:flex;gap:4px;flex:none}
/* photo required gate */
.gate-box{border:1.5px dashed var(--warning);background:#F5EBD9;border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.gate-box p{font-size:13px;color:#8A6223}
/* 4-slot product photo uploader (3 -> 4 acili hazirlik, MOCKUP SISTEMI 2026-07-23) */
.pi-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pi-slots-hint{margin-top:6px}
.pi-slot{display:flex;flex-direction:column;gap:6px;align-items:center;min-width:0;max-width:100%}
.pi-slot-frame{width:100%;aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;position:relative;background:var(--navy-50)}
.pi-slot-frame img{width:100%;height:100%;object-fit:cover;display:block}
.pi-slot-empty{width:100%;aspect-ratio:1;border:1.5px dashed var(--grey-200);border-radius:var(--radius-md);background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--grey-400);cursor:pointer;font-family:inherit;font-size:11px}
.pi-slot-empty:hover{border-color:var(--navy-400);color:var(--navy-700)}
.pi-slot-empty:disabled{opacity:.4;cursor:not-allowed}
.pi-slot-action{position:absolute;bottom:4px;left:4px;right:4px;font-size:11px;background:rgba(10,20,36,.65);color:#fff;border:none;border-radius:6px;padding:4px;cursor:pointer;font-family:inherit}
.pi-slot-badge{font-size:11px;color:var(--text-muted)}
/* comments (sosyal) */
.comment-card{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--white)}
.comment-card+.comment-card{margin-top:12px}
.comment-quote{font-size:13px;color:var(--grey-700);font-style:italic}
.comment-reply-box{background:var(--navy-50);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--navy-900)}
.comment-important{display:flex;align-items:center;gap:6px;color:var(--error);font-size:12px;font-weight:500}
.comment-foot{display:flex;gap:8px;flex-wrap:wrap}
.comment-answered{display:flex;align-items:center;gap:6px;color:var(--success);font-size:13px;font-weight:500}
.comment-rejected{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-muted)}
/* social platform connect rows */
.plat-row{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--grey-100)}
.plat-row:last-child{border-bottom:none}
.plat-ic{width:40px;height:40px;border-radius:10px;background:var(--navy-50);color:var(--navy-700);display:flex;align-items:center;justify-content:center}
.plat-name{display:flex;flex-direction:column;gap:2px}
.plat-name b{font-size:14px;font-weight:500;color:var(--navy-900)}
.plat-name span{font-size:12px;color:var(--text-muted)}
.plat-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* approvals queue */
.q-card{display:flex;flex-direction:column;gap:10px;padding:16px;cursor:pointer;text-align:left;width:100%}
.q-card:hover{box-shadow:var(--shadow-md)}
.q-visual{width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;position:relative;background:var(--navy-50)}
.q-visual img,.q-visual video{width:100%;height:100%;object-fit:cover;display:block}
/* onaylar detay modalinda video onizleme — dogal oran, kirpma yok (bkz. openOnaylarDetail).
   Ayni ozgullukte (.q-visual video) AMA sonra tanimlandigi icin kazanir — .q-visual-fit HER
   ZAMAN .q-visual ile birlikte kullanilir (iki sinif ayni elemanda). */
.q-visual-fit{aspect-ratio:auto;background:#000}
.q-visual-fit video{width:100%;max-height:50vh;object-fit:contain;display:block}
.q-text{font-size:13px;color:var(--grey-700);margin:0}
/* photo-fill helper for gen picker / archive tiles that hold a real <img>/<video> */
.ph-tile img,.ph-tile video{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
@media(max-width:960px){.prod-pick-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:560px){.prod-pick-grid{grid-template-columns:minmax(0,1fr)}.pi-slots{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Asset önizleme penceresi (arşiv/özet karta tıklama) — gece cilası 2026-07-21 */
.item-tile[role="button"]{cursor:pointer}
.item-tile[role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.asset-preview-media{position:relative;width:100%;min-height:220px;max-height:60vh;display:flex;align-items:center;justify-content:center;background:var(--navy-950);border-radius:var(--radius-lg);overflow:hidden}
.asset-preview-media img,.asset-preview-media video{max-width:100%;max-height:60vh;object-fit:contain;display:block}
.asset-preview-meta{margin-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.asset-preview-meta p{margin:0;color:var(--text-muted);font-size:var(--text-sm);line-height:var(--leading-body)}

/* ---------------------------------------------------------------- 6. MOCKUP SISTEMI (2026-07-23) */
/* Uret ekrani — MOCKUP|VIDEO segmented control (kompakt, Linear/Raycast keskinligi: ince
   ray + kabarik secili segment). Tam-genislik hap DEGIL — icerige gore daralir, sola yaslanir. */
.ur-bigtabs{align-self:flex-start;display:inline-flex;gap:3px;background:var(--navy-50);border:1px solid var(--grey-200);border-radius:var(--radius-md);padding:3px}
.ur-bigtab{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:inherit;font-size:var(--text-sm);font-weight:500;height:34px;padding:0 16px;border-radius:7px;border:none;background:transparent;color:var(--grey-700);cursor:pointer;transition:background var(--dur-fast) var(--ease-brand),color var(--dur-fast) var(--ease-brand),box-shadow var(--dur-fast) var(--ease-brand)}
.ur-bigtab svg{flex:none}
.ur-bigtab:hover{color:var(--navy-900)}
.ur-bigtab.sel{background:var(--white);color:var(--navy-900);box-shadow:var(--shadow-sm)}
.ur-bigtab:active:not(.sel){transform:scale(.98)}
@media(max-width:560px){.ur-bigtabs{align-self:stretch}.ur-bigtab{flex:1;padding:0 10px}}

/* Urun kartlari — hazir (fonsuz) urunler ORTA boy ikon kartinda, "Hazirla" daveti rozetiyle */
.prod-ready-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.prod-ready-card{display:flex;flex-direction:column;gap:8px;padding:var(--space-4);min-width:0;max-width:100%}
.prod-ready-media{width:100%;aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;background:var(--navy-50);display:flex;align-items:center;justify-content:center;color:var(--navy-700);font-weight:600}
.prod-ready-media img{width:100%;max-width:100%;height:100%;object-fit:cover;display:block}
.prod-ready-name{font-size:13px;font-weight:500;color:var(--navy-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere}
.prod-ready-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
@media(max-width:960px){.prod-ready-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.prod-ready-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Sahne galerisi (mockup arka planlari) — kart grid'i, "Benim"/"Postify" rozetiyle ayrisir */
.scene-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.scene-card{display:flex;flex-direction:column;gap:6px;background:var(--white);border:1.5px solid var(--grey-200);border-radius:var(--radius-md);padding:8px;cursor:pointer;font-family:inherit;text-align:left;white-space:normal;transition:border-color var(--dur-fast) var(--ease-brand),background var(--dur-fast) var(--ease-brand);min-width:0;width:100%;max-width:100%}
.scene-card:hover{border-color:var(--navy-300)}
.scene-card.sel{border-color:var(--navy-600);background:var(--navy-50)}
.scene-card-media{display:block;width:100%;max-width:100%;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--navy-50)}
.scene-card-media img{width:100%;max-width:100%;height:100%;object-fit:cover;display:block}
.scene-card-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.scene-card-meta b{font-size:12px;font-weight:500;color:var(--navy-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;max-width:100%}
.scene-card-meta em{font-style:normal;font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;max-width:100%;display:block}
.scene-card-meta .kbadge{align-self:flex-start;font-size:10px;padding:2px 8px}
.scene-card-wrap{position:relative;min-width:0;max-width:100%}
.scene-zoom{position:absolute;top:14px;right:14px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;background:rgba(10,20,36,.62);color:var(--paper);cursor:pointer;opacity:0;transition:opacity var(--dur-fast) var(--ease-brand),background var(--dur-fast) var(--ease-brand)}
.scene-card-wrap:hover .scene-zoom,.scene-zoom:focus-visible{opacity:1}
.scene-zoom:hover{background:rgba(10,20,36,.85)}
@media(hover:none){.scene-zoom{opacity:1}}
@media(max-width:960px){.scene-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.scene-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Sahne+urun secim seridi (mockup birlestirme adimi) */
.scene-select-strip{display:flex;flex-direction:column;gap:14px;background:var(--navy-50);min-width:0;max-width:100%}
.scene-select-top{display:flex;gap:12px;align-items:center;flex-wrap:wrap;min-width:0}
.scene-select-thumb{width:56px;height:56px;border-radius:10px;overflow:hidden;flex:none;background:var(--white)}
.scene-select-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.scene-select-top b{overflow-wrap:anywhere}

/* ---------------------------------------------------------------- 7. Onarim 2026-07-24 (P1-P8) */
/* P6 — tasarlanmis mock/yer tutucu sahne gorseli (ham okunmaz SVG yerine): marka tonunda
   yumusak degrade + merkezi ikon; gercek gorsel kartlariyla ayni oran/cerceve. */
.scene-card-media-mock{display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,var(--navy-50),var(--brown-50));color:var(--navy-300)}
.scene-card-media-mock svg{opacity:.9}
.scene-select-thumb.scene-card-media-mock{background:linear-gradient(155deg,var(--navy-50),var(--brown-50))}

/* P7 — urun carousel bos durumu: ham "M" harfi yerine tasarlanmis cerceve + ikon + net eylem. */
.mu-carousel-slide .prod-ready-media-empty{background:linear-gradient(155deg,var(--navy-50),var(--brown-50));border:1.5px dashed var(--grey-200);color:var(--navy-300)}
.prod-prep-cta{display:inline-flex;align-items:center;gap:6px;align-self:center;margin-top:4px;background:none;border:none;color:var(--brown-600);font-family:inherit;font-size:var(--text-sm);font-weight:500;cursor:pointer;padding:5px 10px;border-radius:var(--radius-sm);transition:color var(--dur-fast) var(--ease-brand),background var(--dur-fast) var(--ease-brand),transform var(--dur-fast) var(--ease-brand)}
.prod-prep-cta:hover{color:var(--brown-700);background:var(--brown-50)}
.prod-prep-cta:active{transform:scale(.97)}

/* P1/P8 — akis-ici (yuzmeyen) dil anahtari; koyu zeminlerde (panel kenar cubugu + auth paneli). */
.lang-switch{display:inline-flex;gap:2px;background:rgba(247,246,242,.08);border:1px solid rgba(247,246,242,.14);border-radius:var(--radius-pill);padding:3px}
.lang-switch button{border:none;background:transparent;color:rgba(247,246,242,.7);font-family:inherit;font-size:12px;font-weight:600;line-height:1;padding:6px 12px;border-radius:var(--radius-pill);cursor:pointer;transition:background var(--dur-fast) var(--ease-brand),color var(--dur-fast) var(--ease-brand),transform var(--dur-fast) var(--ease-brand)}
.lang-switch button:hover{color:var(--paper)}
.lang-switch button.on{background:var(--brown-500);color:var(--paper)}
.lang-switch button:active{transform:scale(.95)}
.dash-lang{padding:12px 8px 0;display:flex;justify-content:flex-start}

/* P8 — auth sol paneli: ust satir (logo + dil), olculu deger listesi (ust olu alani doldurur). */
.auth-side-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.auth-side-logo{display:inline-flex}
.auth-feats{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.auth-feats li{display:flex;align-items:center;gap:12px;color:rgba(247,246,242,.82);font-size:var(--text-sm)}
.auth-feats li svg{flex:none;color:var(--brown-300)}
@media(max-width:820px){.auth-side-top{flex:1}.auth-feats{display:none}}

/* Erisilebilirlik — hareket azaltma tercihi: gecis/animasyonlari sustur (yalniz transform/opacity
   mikro-etkilesimleri de dahil). */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------------------------------------------------------------- 7. SOSYAL GELEN KUTUSU (2026-07-27) */
/* Yorumlar + mesajlar. Yeni gorsel dil ICAT EDILMEDI: mevcut kcard/kbadge/kbtn ailesi ve
   .ur-bigtabs segmented control deseni aynen kullanilir. Boyut disiplini (2026-07-23 dersi):
   her grid cocugunda min-width:0, uzun metinde overflow-wrap — 375px'te yatay tasma YOK. */

/* Sekme satirindaki sayac rozeti — "Yorumlar 3" gibi. Secili sekmede koyu, digerinde soluk. */
.tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-pill);background:var(--grey-100);color:var(--grey-700);font-size:11px;font-weight:600;line-height:1}
.ur-bigtab.sel .tab-count{background:var(--navy-100);color:var(--navy-800)}

/* --- Yorum listesi --- */
.inbox-list{display:flex;flex-direction:column;gap:12px}
.inbox-card{display:flex;flex-direction:column;gap:10px;padding:var(--space-4);min-width:0}
.inbox-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.inbox-who{font-size:var(--text-sm);font-weight:600;color:var(--navy-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.inbox-time{font-size:var(--text-xs);color:var(--text-muted);margin-left:auto;white-space:nowrap}
.inbox-quote{margin:0;font-size:var(--text-sm);line-height:var(--leading-body);color:var(--text-body);overflow-wrap:anywhere}
/* Onerilen yanit — ince sol seridiyle "bu bizim yazdigimiz" ayrimi (alinti degil, taslak). */
.inbox-draft{border-left:2px solid var(--navy-300);background:var(--navy-50);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:10px 12px;min-width:0}
.inbox-draft-label{display:block;font-size:11px;font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--navy-700);margin-bottom:4px}
.inbox-draft p{margin:0;font-size:var(--text-sm);line-height:var(--leading-body);color:var(--navy-900);overflow-wrap:anywhere}
.inbox-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.inbox-acts .spacer{margin-left:auto}
@media(max-width:560px){.inbox-acts .spacer{margin-left:0}.inbox-time{margin-left:0;width:100%}}

/* --- Mesajlar: iki kolon (liste + konusma) --- */
.dm-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;align-items:start}
.dm-list{display:flex;flex-direction:column;gap:6px;min-width:0}
.dm-item{display:flex;flex-direction:column;gap:3px;padding:11px 12px;border:1px solid var(--grey-200);border-radius:var(--radius-md);background:var(--white);cursor:pointer;font-family:inherit;text-align:left;min-width:0;width:100%;transition:border-color var(--dur-fast) var(--ease-brand),background var(--dur-fast) var(--ease-brand)}
.dm-item:hover{border-color:var(--navy-300)}
.dm-item.sel{border-color:var(--navy-700);background:var(--navy-50)}
.dm-item-top{display:flex;align-items:center;gap:6px;min-width:0}
.dm-item-name{font-size:var(--text-sm);font-weight:600;color:var(--navy-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dm-unread{flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.dm-item-last{font-size:var(--text-xs);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Konusma paneli */
.dm-thread{display:flex;flex-direction:column;min-width:0;padding:0;overflow:hidden}
.dm-thread-head{display:flex;align-items:center;gap:10px;padding:14px var(--space-4);border-bottom:1px solid var(--grey-200);flex-wrap:wrap;min-width:0}
.dm-thread-name{font-size:var(--text-md);font-weight:600;color:var(--navy-900);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-back{display:none}
.dm-body{display:flex;flex-direction:column;gap:8px;padding:var(--space-4);max-height:420px;overflow-y:auto}
.dm-bubble{max-width:78%;padding:9px 12px;border-radius:var(--radius-md);font-size:var(--text-sm);line-height:var(--leading-body);overflow-wrap:anywhere}
.dm-bubble.in{align-self:flex-start;background:var(--grey-100);color:var(--text-body);border-bottom-left-radius:3px}
.dm-bubble.out{align-self:flex-end;background:var(--navy-900);color:var(--white);border-bottom-right-radius:3px}
.dm-bubble.draft{align-self:flex-end;background:var(--navy-50);color:var(--navy-900);border:1px dashed var(--navy-300);border-bottom-right-radius:3px}
.dm-bubble-meta{display:block;margin-top:3px;font-size:10px;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.dm-composer{display:flex;flex-direction:column;gap:8px;padding:var(--space-4);border-top:1px solid var(--grey-200);background:var(--paper)}
.dm-composer textarea{resize:vertical;min-height:64px}
.dm-composer-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dm-window{font-size:var(--text-xs);color:var(--text-muted)}
.dm-window.closed{color:var(--error)}

@media(max-width:900px){
  .dm-layout{grid-template-columns:minmax(0,1fr)}
  /* Mobilde tek kolon: liste VEYA konusma gorunur (ikisi ayni anda degil) */
  .dm-layout.thread-open .dm-list{display:none}
  .dm-layout:not(.thread-open) .dm-thread{display:none}
  .dm-back{display:inline-flex}
  .dm-bubble{max-width:88%}
}