/* ARCHTAN profesyonel tema katmanı: yalnızca görünüm. Mantık, prompt ve çıktı görselleri etkilenmez.
   Son yüklenir; geri almak için index.html ve admin.html içindeki bu satırı silmek yeterli. */
:is(.customer-shell,.admin-shell){
  --bg:#17181a;--surface:#1f2023;--surface-raised:#2a2b2f;--ink:#ececea;--muted:#a3a5a8;--line:#35373b;
  --accent:#d9bf94;--accent-ink:#1a1612;--accent-soft:#2f2a22;--neutral-mid:#8b8d90;--radius:14px;
  --shadow:0 1px 0 #ffffff08 inset,0 10px 30px -18px #000;letter-spacing:.005em}
html[data-theme=light] :is(.customer-shell,.admin-shell){
  --bg:#f5f4f1;--surface:#ffffff;--surface-raised:#eeece7;--ink:#1d1e20;--muted:#5d6166;--line:#dcd9d2;
  --accent:#1d1e20;--accent-ink:#ffffff;--accent-soft:#ebe6dc;--shadow:0 1px 2px #1d1e200a,0 12px 28px -20px #1d1e2040}
html{background:#17181a}html[data-theme=light]{background:#f5f4f1}
:is(.customer-shell,.admin-shell) :is(h1,h2,h3){letter-spacing:-.015em}
:is(.customer-shell,.admin-shell) h1{font-weight:700}

/* Üst menü: sabit, hafif cam etkisi, alt çizgili sekmeler */
:is(.customer-shell,.admin-shell) .top{position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);padding:12px 28px;gap:10px 22px}
.customer-shell .tabs{gap:2px}
.customer-shell .tabs button{background:transparent;border:0;border-radius:0;padding:10px 14px;color:var(--muted);font-weight:500;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.customer-shell .tabs button:hover{color:var(--ink)}
.customer-shell .tabs button[aria-current=true]{background:transparent;color:var(--ink);border-color:var(--accent);font-weight:600}
.customer-shell .top .linkbtn,.customer-shell .top a{font-size:13px;color:var(--muted)}
.customer-shell .top .linkbtn:hover,.customer-shell .top a:hover{color:var(--ink)}

/* Kartlar ve başlıklar */
:is(.customer-shell,.admin-shell) .card{border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 28px}
.customer-shell .eyebrow,.customer-shell .workspace-intro .eyebrow{color:var(--accent);letter-spacing:.14em;font-size:11px;font-weight:700}
.customer-shell .workspace-intro h1,.customer-shell .studio-intro h1{font-size:clamp(28px,3.4vw,42px);line-height:1.1}
.customer-shell main{max-width:1440px}

/* Düğmeler */
:is(.customer-shell,.admin-shell) .btn{border-radius:10px;font-weight:600;padding:11px 20px;transition:transform .12s,filter .15s,background .15s}
:is(.customer-shell,.admin-shell) .btn:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
:is(.customer-shell,.admin-shell) .btn.ghost{background:transparent;border-color:var(--line)}
:is(.customer-shell,.admin-shell) .btn.ghost:hover:not(:disabled){background:var(--surface-raised);filter:none}
.customer-shell .dock{background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 -12px 30px -22px #000}
.customer-shell .dock .btn{min-width:130px}

/* Adım çubuğu */
.customer-shell .studio-steps{background:transparent;border:0;gap:6px}
.customer-shell .studio-steps button{border:1px solid transparent;border-radius:10px;color:var(--muted);transition:background .15s,color .15s}
.customer-shell .studio-steps button:hover{background:var(--surface-raised);color:var(--ink)}
.customer-shell .studio-steps button[aria-current=step]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.customer-shell .studio-steps button[aria-current=step] span:first-child{color:var(--accent)}

/* Seçim kartları: başlangıç, tarz, çipler */
.customer-shell .workflow-choice,.customer-shell .style{border-radius:var(--radius)!important;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s}
.customer-shell .workflow-choice:hover,.customer-shell .style:hover{transform:translateY(-2px);border-color:var(--neutral-mid)!important;box-shadow:var(--shadow)}
.customer-shell .workflow-choice[aria-pressed=true],.customer-shell .style[aria-pressed=true]{border-color:var(--accent)!important;background:var(--accent-soft)!important;box-shadow:inset 3px 0 var(--accent)}
.customer-shell .workflow-main[aria-pressed=true] b{color:var(--accent)}
.customer-shell .chip,.customer-shell .cats button{border-radius:999px;padding:8px 14px;transition:background .15s,border-color .15s}
.customer-shell .chip:hover,.customer-shell .cats button:hover{border-color:var(--neutral-mid)}
.customer-shell :is(.chip[aria-pressed=true],.cats button[aria-current=true]){background:var(--accent-soft);border-color:var(--accent);color:var(--ink);font-weight:600}
.customer-shell .cats{gap:8px;flex-wrap:wrap}
.customer-shell .style .style-image,.customer-shell .style-placeholder{border-radius:calc(var(--radius) - 4px)}
.customer-shell .style-library .material-stripes i{border-radius:6px;box-shadow:0 1px 0 #ffffff14 inset,0 4px 10px -6px #000}

/* Form alanları */
:is(.customer-shell,.admin-shell) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){
  background:var(--surface);border-radius:10px;border:1px solid var(--line);transition:border-color .15s,box-shadow .15s}
:is(.customer-shell,.admin-shell) :is(input,select,textarea):focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);outline:0}

/* Giriş ekranı */
.customer-shell:has(.login){background:radial-gradient(1100px 600px at 50% -10%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),var(--bg)}.customer-shell .login{background:transparent}
.customer-shell .login .card{border-radius:20px;padding:36px;box-shadow:var(--shadow);max-width:460px;width:100%}
.customer-shell .login h1{font-size:34px}

/* Boş durumlar ve galeri */
.customer-shell :is(.empty,.gallery-empty,.package-empty,.summary-empty){border-radius:var(--radius);border:1px dashed var(--line);background:var(--surface)}
.customer-shell .gitem{border-radius:var(--radius);transition:transform .15s,box-shadow .15s}
.customer-shell .gitem:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

/* Modal */
:is(.customer-shell,.admin-shell) .modal{backdrop-filter:blur(6px)}
:is(.customer-shell,.admin-shell) .modal .box{border-radius:18px;box-shadow:0 30px 80px -30px #000}

/* Kaydırma çubuğu ve seçim rengi */
:is(.customer-shell,.admin-shell) ::selection{background:color-mix(in srgb,var(--accent) 35%,transparent)}
:is(.customer-shell,.admin-shell) *{scrollbar-color:var(--line) transparent;scrollbar-width:thin}

/* Telefon: menü tek satırda kayar, bağlantılar toplanır */
@media(max-width:760px){
  :is(.customer-shell,.admin-shell) .top{padding:10px 14px;gap:6px 10px}
  .customer-shell .tabs{order:3;width:100%;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--line);margin-top:4px}
  .customer-shell .tabs button{white-space:nowrap;flex:1;padding:10px 8px}
  .customer-shell .top .spacer{display:none}
  .customer-shell .top .linkbtn{font-size:12px}
  :is(.customer-shell,.admin-shell) .card{padding:18px 16px}
}
@media(prefers-reduced-motion:reduce){:is(.customer-shell,.admin-shell) *{transition:none!important}}

/* Özelleştir: sol seçim özeti + 5 ana başlık */
.customer-shell .opt-layout{display:grid;grid-template-columns:272px minmax(0,1fr);gap:28px;align-items:start;margin-top:8px}
.customer-shell .opt-main{min-width:0}
.customer-shell .sel-summary{position:sticky;top:96px;max-height:calc(100vh - 190px);overflow:auto;padding:18px;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;gap:10px}
.customer-shell .sel-summary .sel-package{font-size:16px;font-family:Manrope,Inter,sans-serif;line-height:1.3}
.customer-shell .sel-cat{border-top:1px solid var(--line);padding-top:10px}
.customer-shell .sel-cat h4{margin:0 0 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.customer-shell .sel-row{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;background:transparent;border:0;border-radius:8px;padding:6px 8px;margin:0 -8px;color:var(--ink);font:inherit;width:calc(100% + 16px);transition:background .12s}
.customer-shell .sel-row:hover{background:var(--surface)}
.customer-shell .sel-row span{font-size:12px;color:var(--muted)}
.customer-shell .sel-row em{font-style:normal;font-size:13px;line-height:1.35;overflow-wrap:anywhere}
.customer-shell .sel-row.changed span::after{content:' •';color:var(--accent)}
.customer-shell .sel-status{margin:4px 0 0;font-size:12px;color:var(--muted)}
.customer-shell .cat-sub{margin:26px 0 4px;padding-top:18px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.customer-shell .cat-sub:first-child{margin-top:6px;border-top:0;padding-top:0}
.customer-shell .diff-badge{font-size:11px;font-weight:600;color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:2px 9px;margin-left:4px}
@media(max-width:980px){.customer-shell .opt-layout{grid-template-columns:1fr}.customer-shell .sel-summary{position:static;max-height:none;order:2}.customer-shell .opt-main{order:1}}

/* Düzeltmeler: tablo başlıkları, modal düğmeleri, işaret kutuları, dosya seçici, galeri */
:is(.customer-shell,.admin-shell) table{border-collapse:collapse;width:100%}
:is(.customer-shell,.admin-shell) thead th,:is(.customer-shell,.admin-shell) thead td{background:var(--surface-raised)!important;color:var(--muted)!important;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:10px 12px;text-align:left}
:is(.customer-shell,.admin-shell) tbody td{padding:12px;border-bottom:1px solid var(--line)}
:is(.customer-shell,.admin-shell) tbody tr:hover td{background:color-mix(in srgb,var(--surface-raised) 55%,transparent)}
:is(.customer-shell,.admin-shell) input[type=checkbox],:is(.customer-shell,.admin-shell) input[type=radio]{accent-color:var(--accent);width:16px;height:16px;vertical-align:-3px;margin-right:8px}
:is(.customer-shell,.admin-shell) label.ref-check{display:flex;align-items:center;gap:2px;font-size:14px}
:is(.customer-shell,.admin-shell) .modal .box .btn+.btn,:is(.customer-shell,.admin-shell) .modal .box button+button{margin-left:10px}
:is(.customer-shell,.admin-shell) .modal .box .row,:is(.customer-shell,.admin-shell) .modal .box .actions{gap:10px;flex-wrap:wrap}
:is(.customer-shell,.admin-shell) input[type=file]{padding:10px;border:1px dashed var(--line);border-radius:10px;background:var(--surface);color:var(--muted);width:100%;cursor:pointer}
:is(.customer-shell,.admin-shell) input[type=file]::file-selector-button{background:var(--accent);color:var(--accent-ink);border:0;border-radius:8px;padding:8px 14px;margin-right:12px;font-weight:600;cursor:pointer}
.customer-shell .workflow-start{padding:16px 24px}.customer-shell .workflow-start h2{font-size:18px}
.customer-shell .gitem .bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.customer-shell .gitem .bar>button,.customer-shell .gitem .bar>a,.customer-shell .more-list>button{background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:6px 11px;font-size:13px;text-decoration:none;cursor:pointer}
.customer-shell .gitem .bar>button:hover,.customer-shell .gitem .bar>a:hover,.customer-shell .more-list>button:hover{background:var(--surface-raised)}
.customer-shell .more-actions{width:100%;margin-top:4px}
.customer-shell .more-actions>summary{font-size:13px;color:var(--muted);padding:4px 0}
.customer-shell .more-list{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0 2px}
.customer-shell .gitem{box-shadow:var(--shadow)}
.customer-shell #studio-step-0{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.customer-shell #studio-step-0>*{grid-column:1/-1;min-width:0}
.customer-shell #studio-step-0>.workflow-start,.customer-shell #studio-step-0>.space-selector{grid-column:auto}
.customer-shell #studio-step-0>.workflow-start .sub{margin:4px 0 0;font-size:13px}
@media(max-width:900px){.customer-shell #studio-step-0{grid-template-columns:1fr}.customer-shell #studio-step-0>.workflow-start,.customer-shell #studio-step-0>.space-selector{grid-column:1/-1}}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:4px 0}
.seg-btn{background:transparent;color:var(--muted);border:0;padding:8px 18px;font:inherit;font-weight:600;cursor:pointer}
.seg-btn+.seg-btn{border-left:1px solid var(--line)}
.seg-btn[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}
.seg-label{display:block;font-size:13px;color:var(--muted)}.seg-hint{display:block;color:var(--muted);margin-top:2px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:4px 0}
.seg-btn{background:transparent;color:var(--muted);border:0;padding:8px 18px;font:inherit;font-weight:600;cursor:pointer}
.seg-btn+.seg-btn{border-left:1px solid var(--line)}
.seg-btn[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}
.seg-label{display:block;font-size:13px;color:var(--muted)}.seg-hint{display:block;color:var(--muted);margin-top:2px}
.scene-bar{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:16px;border-color:var(--accent)}
.scene-group{min-width:0}.scene-title{display:flex;flex-direction:column;margin-bottom:8px}.scene-title b{font-size:15px}.scene-title small{color:var(--muted)}
.scene-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;padding-top:6px}
.control-grid .scene-group{grid-column:1/-1}
.scene-title{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.scene-title small{color:var(--muted)}
.scene-opt{position:relative;text-align:left;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:2px}
.scene-opt small{color:var(--muted);font-size:12px;line-height:1.3}
.scene-opt[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset}
.scene-tag{position:absolute;top:-9px;right:10px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px}
@media(max-width:900px){.scene-bar{grid-template-columns:1fr}}