/* =====================================================================
   NFC KARTVİZİT — Panel Tasarım Sistemi
   Tuma Bilişim · Sora (başlık) + Inter (metin)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@500;600;700;800&display=swap');

:root{
  --ink:#0F1222; --ink-2:#1A1E33;
  --paper:#F5F6FB; --surface:#FFFFFF; --surface-2:#FBFBFE;
  --line:#E6E8F2; --line-2:#EEF0F7;
  --text:#161A2E; --muted:#697089; --muted-2:#9AA0B5;
  --brand:#3D5AFE; --brand-700:#2A41E0; --brand-50:#EDF0FF; --brand-100:#DDE3FF;
  --good:#0CA678; --good-50:#E6F7F1;
  --danger:#E5484D; --danger-50:#FDECEC;
  --warn:#E8870B; --warn-50:#FDF1E1;
  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:26px;
  --sh-1:0 1px 2px rgba(16,18,34,.06), 0 1px 3px rgba(16,18,34,.05);
  --sh-2:0 4px 14px rgba(16,18,34,.07), 0 2px 4px rgba(16,18,34,.05);
  --sh-3:0 18px 50px -12px rgba(16,18,34,.22);
  --ring:0 0 0 3px var(--brand-100);
  --ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --fd:'Sora','Inter',system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--ff); color:var(--text); background:var(--paper);
  -webkit-font-smoothing:antialiased; line-height:1.5; min-height:100vh;
}
a{color:var(--brand); text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3{font-family:var(--fd); letter-spacing:-.02em; margin:0; color:var(--ink)}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:8px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------- Marka / logo ---------- */
.brand{display:inline-flex; align-items:center; gap:10px; font-family:var(--fd);
  font-weight:800; font-size:19px; color:var(--ink); letter-spacing:-.02em}
.brand .mark{width:30px; height:30px; flex:none}
.brand small{font-weight:600; color:var(--muted); font-size:12px; letter-spacing:.02em}

/* ---------- Butonlar ---------- */
.btn{
  --bg:var(--surface); --bd:var(--line); --fg:var(--text);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--ff); font-weight:600; font-size:14.5px; line-height:1;
  padding:11px 16px; border-radius:var(--r-sm); cursor:pointer;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  transition:transform .06s ease, box-shadow .15s ease, background .15s ease, border-color .15s;
  white-space:nowrap; user-select:none;
}
.btn:hover{box-shadow:var(--sh-1)}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px; height:17px}
.btn-primary{--bg:var(--brand); --fg:#fff; --bd:transparent; box-shadow:0 2px 8px rgba(61,90,254,.28)}
.btn-primary:hover{--bg:var(--brand-700); box-shadow:0 6px 18px rgba(61,90,254,.34)}
.btn-ghost{--bg:transparent; --bd:transparent; --fg:var(--muted)}
.btn-ghost:hover{--bg:var(--brand-50); --fg:var(--brand)}
.btn-soft{--bg:var(--brand-50); --bd:transparent; --fg:var(--brand-700)}
.btn-soft:hover{--bg:var(--brand-100)}
.btn-line{--bg:var(--surface); --bd:var(--line); --fg:var(--text)}
.btn-danger{--bg:var(--surface); --bd:var(--danger-50); --fg:var(--danger)}
.btn-danger:hover{--bg:var(--danger-50)}
.btn-block{width:100%}
.btn-lg{padding:14px 20px; font-size:15.5px; border-radius:var(--r)}
.btn-sm{padding:8px 12px; font-size:13px}
.btn[disabled]{opacity:.5; pointer-events:none}

/* ---------- Form alanları ---------- */
.field{margin-bottom:16px}
.field > label, .lbl{display:block; font-weight:600; font-size:13px; color:var(--text);
  margin-bottom:7px}
.field .hint{font-size:12px; color:var(--muted); margin-top:6px}
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=url],textarea,select{
  width:100%; font-family:var(--ff); font-size:14.5px; color:var(--text);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:11px 13px; transition:border-color .15s, box-shadow .15s;
}
textarea{resize:vertical; min-height:84px; line-height:1.55}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--brand); box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23697089' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:36px}
.input-group{display:flex; align-items:stretch}
.input-group .prefix{display:flex; align-items:center; padding:0 12px; font-size:13px;
  color:var(--muted); background:var(--surface-2); border:1px solid var(--line);
  border-right:0; border-radius:var(--r-sm) 0 0 var(--r-sm); white-space:nowrap}
.input-group input{border-radius:0 var(--r-sm) var(--r-sm) 0}

/* ---------- Yardımcılar ---------- */
.muted{color:var(--muted)} .small{font-size:13px}
.row{display:flex; gap:12px} .row.wrap{flex-wrap:wrap}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.spacer{flex:1} .center{text-align:center}
.divider{height:1px; background:var(--line); margin:18px 0; border:0}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding:4px 10px; border-radius:999px; background:var(--brand-50); color:var(--brand-700)}
.badge.green{background:var(--good-50); color:var(--good)}
.badge.gray{background:var(--line-2); color:var(--muted)}
.badge.warn{background:var(--warn-50); color:var(--warn)}
.badge .dot{width:6px; height:6px; border-radius:50%; background:currentColor}

/* =====================================================================
   GİRİŞ / KAYIT — bölünmüş ekran
   ===================================================================== */
.auth{min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr}
.auth-aside{
  position:relative; overflow:hidden; padding:48px;
  background:radial-gradient(120% 120% at 15% 10%, #21306b 0%, #141a3a 45%, #0c1130 100%);
  color:#fff; display:flex; flex-direction:column;
}
.auth-aside .brand{color:#fff}
.auth-aside .brand small{color:#aab2e6}
.aside-body{margin:auto 0; max-width:430px; position:relative; z-index:2}
.aside-body h2{color:#fff; font-size:34px; line-height:1.15; font-weight:800; letter-spacing:-.03em}
.aside-body p{color:#c2c8ef; font-size:15.5px; margin-top:14px; line-height:1.6}
.aside-list{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:12px}
.aside-list li{display:flex; gap:11px; align-items:flex-start; color:#dfe3f7; font-size:14.5px}
.aside-list svg{width:20px; height:20px; flex:none; color:#8ea0ff; margin-top:1px}
.rings{position:absolute; right:-120px; bottom:-120px; width:520px; height:520px;
  opacity:.5; z-index:1; pointer-events:none}
.rings span{position:absolute; inset:0; margin:auto; border-radius:50%;
  border:1.5px solid rgba(142,160,255,.35)}
.rings span:nth-child(1){width:160px;height:160px}
.rings span:nth-child(2){width:280px;height:280px; border-color:rgba(142,160,255,.22)}
.rings span:nth-child(3){width:400px;height:400px; border-color:rgba(142,160,255,.14)}
.rings span:nth-child(4){width:520px;height:520px; border-color:rgba(142,160,255,.08)}

.auth-main{display:flex; align-items:center; justify-content:center; padding:40px 24px}
.auth-card{width:100%; max-width:392px}
.auth-card h1{font-size:25px; margin-bottom:6px}
.auth-card .sub{color:var(--muted); font-size:14.5px; margin-bottom:26px}
.auth-tabs{display:flex; gap:4px; background:var(--line-2); padding:4px; border-radius:12px; margin-bottom:24px}
.auth-tabs button{flex:1; border:0; background:transparent; padding:9px; border-radius:9px;
  font-family:var(--ff); font-weight:600; font-size:14px; color:var(--muted); cursor:pointer; transition:.15s}
.auth-tabs button.active{background:var(--surface); color:var(--ink); box-shadow:var(--sh-1)}
.auth-foot{margin-top:18px; font-size:13.5px; color:var(--muted); text-align:center}
.link{color:var(--brand); font-weight:600; cursor:pointer; background:none; border:0; font-size:inherit; font-family:inherit}

/* =====================================================================
   UYGULAMA KABUĞU (panel + editör üst bar)
   ===================================================================== */
.topbar{position:sticky; top:0; z-index:30; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line)}
.topbar-in{max-width:1080px; margin:0 auto; height:62px; padding:0 22px;
  display:flex; align-items:center; gap:14px}
.topbar .spacer{flex:1}
.avatar-btn{width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  background:var(--brand-50); color:var(--brand-700); font-weight:700; font-size:14px;
  display:grid; place-items:center; cursor:pointer; font-family:var(--fd)}
.wrap{max-width:1080px; margin:0 auto; padding:28px 22px 80px}

.page-head{display:flex; align-items:flex-end; gap:16px; margin-bottom:24px; flex-wrap:wrap}
.page-head h1{font-size:24px}
.page-head .sub{color:var(--muted); font-size:14px; margin-top:4px}

/* ---------- Kart ızgarası (dashboard) ---------- */
.cards-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px}
.ctile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-1); transition:box-shadow .18s, transform .18s;
  display:flex; flex-direction:column}
.ctile:hover{box-shadow:var(--sh-2); transform:translateY(-2px)}
.ctile-top{height:78px; position:relative; background:var(--brand)}
.ctile-top .stamp{position:absolute; left:18px; bottom:-26px; width:56px; height:56px;
  border-radius:16px; border:3px solid var(--surface); object-fit:cover; background:#dfe3f7}
.ctile-top .stamp.ph{display:grid; place-items:center; color:#fff; font-family:var(--fd);
  font-weight:700; font-size:20px}
.ctile-stat{position:absolute; right:14px; top:12px; display:flex; gap:8px}
.ctile-stat .chip{display:inline-flex; align-items:center; gap:5px; font-size:11.5px;
  font-weight:600; color:#fff; background:rgba(0,0,0,.22); padding:4px 9px; border-radius:999px}
.ctile-stat .chip svg{width:13px;height:13px}
.ctile-body{padding:34px 18px 16px; flex:1}
.ctile-body .nm{font-family:var(--fd); font-weight:700; font-size:17px; color:var(--ink)}
.ctile-body .tt{color:var(--muted); font-size:13.5px; margin-top:2px}
.ctile-link{display:flex; align-items:center; gap:6px; margin-top:12px; font-size:12.5px;
  color:var(--muted); background:var(--surface-2); border:1px solid var(--line-2);
  padding:7px 10px; border-radius:9px; overflow:hidden}
.ctile-link span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ctile-foot{display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--line-2); background:var(--surface-2)}
.ctile-foot .btn{flex:1}
.icon-btn{width:38px; height:38px; flex:none; padding:0; display:grid; place-items:center}

/* ---------- Boş durum ---------- */
.empty{text-align:center; padding:64px 24px; background:var(--surface);
  border:1px dashed var(--line); border-radius:var(--r-lg)}
.empty .ring-ico{width:64px; height:64px; margin:0 auto 18px; color:var(--brand)}
.empty h3{font-size:19px; margin-bottom:8px}
.empty p{color:var(--muted); max-width:380px; margin:0 auto 22px}

/* ---------- Limit şeridi ---------- */
.limit-bar{display:flex; align-items:center; gap:14px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); padding:14px 18px; margin-bottom:22px}
.limit-bar .track{flex:1; height:8px; background:var(--line-2); border-radius:999px; overflow:hidden}
.limit-bar .fill{height:100%; background:var(--brand); border-radius:999px; transition:width .4s}
.limit-bar.full .fill{background:var(--warn)}

/* =====================================================================
   EDİTÖR
   ===================================================================== */
.editor{display:grid; grid-template-columns:1fr 392px; gap:26px; align-items:start}
.ed-form{min-width:0}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); margin-bottom:18px; overflow:hidden}
.panel-h{padding:16px 20px; border-bottom:1px solid var(--line-2); display:flex; align-items:center; gap:10px}
.panel-h .ph-ico{width:34px; height:34px; border-radius:10px; background:var(--brand-50);
  color:var(--brand-700); display:grid; place-items:center; flex:none}
.panel-h .ph-ico svg{width:18px;height:18px}
.panel-h h3{font-size:15.5px; font-family:var(--fd)}
.panel-h .ph-sub{font-size:12.5px; color:var(--muted); margin-top:1px}
.panel-b{padding:20px}

/* Şablon seçici */
.tpl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.tpl{cursor:pointer; border:2px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--surface); transition:border-color .15s, transform .12s; text-align:center; padding-bottom:9px}
.tpl:hover{transform:translateY(-2px)}
.tpl.sel{border-color:var(--brand); box-shadow:var(--ring)}
.tpl .thumb{height:84px; display:block}
.tpl .nm{font-size:12.5px; font-weight:600; margin-top:8px}
.tpl-aurora{background:linear-gradient(160deg,var(--brand) 0%,#7a5cff 100%)}
.tpl-minimal{background:#fff; border-bottom:1px solid var(--line-2); position:relative}
.tpl-minimal:after{content:""; position:absolute; left:14px; top:18px; width:34px; height:5px;
  border-radius:3px; background:var(--brand)}
.tpl-noir{background:#15171f}

/* Renk seçici */
.swatches{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.sw{width:30px; height:30px; border-radius:50%; cursor:pointer; border:2px solid #fff;
  box-shadow:0 0 0 1px var(--line); transition:transform .12s}
.sw:hover{transform:scale(1.12)}
.sw.sel{box-shadow:0 0 0 2px var(--ink)}
.sw-custom{position:relative; width:34px; height:34px}
.sw-custom input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%}
.sw-custom .face{width:34px; height:34px; border-radius:50%; border:2px dashed var(--line);
  display:grid; place-items:center; color:var(--muted)}

/* Fotoğraf yükleme */
.photo-up{display:flex; align-items:center; gap:16px}
.photo-prev{width:74px; height:74px; border-radius:18px; object-fit:cover; background:var(--brand-50);
  border:1px solid var(--line); display:grid; place-items:center; color:var(--brand-700);
  font-family:var(--fd); font-weight:700; font-size:24px; flex:none}

/* Sosyal alanlar */
.social-row{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.social-row .ico{width:38px; height:38px; flex:none; border-radius:10px; display:grid;
  place-items:center; background:var(--surface-2); border:1px solid var(--line-2); color:var(--muted)}
.social-row .ico svg{width:18px;height:18px}
.social-row input{flex:1}

/* Özel link satırı */
.clink{display:flex; gap:8px; margin-bottom:10px}
.clink input:first-child{flex:0 0 34%}
.clink .rm{flex:none}

/* Editör sticky önizleme */
.ed-preview{position:sticky; top:84px}
.preview-head{display:flex; align-items:center; gap:8px; margin-bottom:14px; color:var(--muted);
  font-size:13px; font-weight:600}
.phone{margin:0 auto; width:330px; max-width:100%; border-radius:38px; padding:11px;
  background:#0F1222; box-shadow:0 30px 60px -20px rgba(15,18,34,.5)}
.phone-screen{background:#fff; border-radius:28px; overflow:hidden; height:600px; overflow-y:auto;
  scrollbar-width:thin}
.phone-screen::-webkit-scrollbar{width:5px}
.phone-screen::-webkit-scrollbar-thumb{background:var(--line); border-radius:9px}

.ed-actions{position:sticky; bottom:0; z-index:20; margin-top:6px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border-top:1px solid var(--line); padding:14px 0; display:flex; gap:12px}

/* =====================================================================
   MODAL
   ===================================================================== */
.modal-bg{position:fixed; inset:0; background:rgba(15,18,34,.5); backdrop-filter:blur(2px);
  display:none; align-items:center; justify-content:center; z-index:60; padding:20px}
.modal-bg.show{display:flex}
.modal{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-3);
  width:100%; max-width:420px; padding:26px; text-align:center; animation:pop .18s ease}
@keyframes pop{from{transform:scale(.95); opacity:0}to{transform:scale(1); opacity:1}}
.modal .m-ico{width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  margin:0 auto 16px; background:var(--danger-50); color:var(--danger)}
.modal h3{font-size:19px; margin-bottom:8px}
.modal p{color:var(--muted); margin-bottom:22px}
.modal .row{justify-content:center}

/* QR kutusu */
.qr-box{display:grid; place-items:center; gap:14px}
.qr-box canvas,.qr-box img{border-radius:14px; border:1px solid var(--line); background:#fff; padding:10px}

/* ---------- Toast ---------- */
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,16px);
  background:var(--ink); color:#fff; font-size:14px; font-weight:500; padding:12px 18px;
  border-radius:12px; box-shadow:var(--sh-3); z-index:90; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; max-width:90vw}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast[data-type=err]{background:var(--danger)}
.toast[data-type=ok]{background:var(--ink)}

/* ---------- Yükleniyor ---------- */
.loading{display:grid; place-items:center; min-height:60vh; color:var(--muted)}
.spin{width:34px; height:34px; border:3px solid var(--line); border-top-color:var(--brand);
  border-radius:50%; animation:sp .7s linear infinite; margin-bottom:12px}
@keyframes sp{to{transform:rotate(360deg)}}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:900px){
  .editor{grid-template-columns:1fr}
  .ed-preview{position:static; order:-1; margin-bottom:8px}
  .phone{width:300px}
  .phone-screen{height:520px}
}
@media (max-width:780px){
  .auth{grid-template-columns:1fr}
  .auth-aside{display:none}
}
@media (max-width:560px){
  .wrap{padding:20px 16px 70px}
  .grid-2{grid-template-columns:1fr}
  .tpl-grid{grid-template-columns:1fr 1fr 1fr}
  .page-head h1{font-size:21px}
}

/* =====================================================================
   v2 — Editör ek bileşenleri + Pro kilidi + plan rozeti
   ===================================================================== */

/* Plan rozeti (topbar) */
.plan-chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  padding:5px 11px; border-radius:999px; background:var(--line-2); color:var(--muted)}
.plan-chip.pro{background:linear-gradient(135deg,#3D5AFE,#7a5cff); color:#fff}
.plan-chip svg{width:13px; height:13px}

/* Pro kilidi (panel üstü) */
.panel.locked{position:relative}
.panel.locked .panel-b{filter:blur(2px); opacity:.5; pointer-events:none; user-select:none}
.lock-veil{position:absolute; inset:0; top:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; text-align:center; padding:24px; z-index:3;
  background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.85))}
.lock-veil .lk-ico{width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(135deg,#3D5AFE,#7a5cff); color:#fff}
.lock-veil p{color:var(--muted); font-size:13.5px; max-width:300px; margin:0}
.pro-pill{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  padding:3px 9px; border-radius:999px; background:linear-gradient(135deg,#3D5AFE,#7a5cff); color:#fff}
.panel-h .pro-pill{margin-left:auto}

/* Galeri / medya ızgarası (editör) */
.gal-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.gal-item{position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; border:1px solid var(--line)}
.gal-item img{width:100%; height:100%; object-fit:cover}
.gal-item .rm{position:absolute; top:5px; right:5px; width:24px; height:24px; border-radius:7px;
  border:0; background:rgba(15,18,34,.6); color:#fff; cursor:pointer; display:grid; place-items:center}
.gal-item .rm svg{width:14px; height:14px}
.gal-add{aspect-ratio:1; border-radius:12px; border:2px dashed var(--line); background:var(--surface-2);
  color:var(--muted); cursor:pointer; display:grid; place-items:center; font-size:12px; gap:4px}
.gal-add:hover{border-color:var(--brand); color:var(--brand)}
.gal-add svg{width:20px; height:20px}

/* Çalışma saatleri editörü */
.hours-row{display:grid; grid-template-columns:54px 1fr 1fr auto; gap:10px; align-items:center;
  margin-bottom:8px}
.hours-row .hd{font-weight:600; font-size:13px; color:var(--text)}
.hours-row input[type=time]{padding:9px 10px}
.hours-row.closed input[type=time]{opacity:.4; pointer-events:none}
.hours-row .cl-toggle{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted);
  white-space:nowrap; cursor:pointer}

/* Servis / belge satırı genişlemesi (clink'i kullanır) */
.svc-row{display:grid; grid-template-columns:1fr 120px auto; gap:8px; margin-bottom:10px}
.svc-row .full{grid-column:1 / -1}
.media-up-row{display:flex; gap:8px; margin-bottom:10px}
.media-up-row input{flex:1}

/* Mesaj kutusu (dashboard) */
.msg-item{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px;
  margin-bottom:10px}
.msg-item.unread{border-color:var(--brand-100); background:var(--brand-50)}
.msg-item .mh{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.msg-item .mh b{font-size:14px}
.msg-item .mh .when{margin-left:auto; font-size:12px; color:var(--muted)}
.msg-item .mb{font-size:13.5px; color:var(--text); white-space:pre-wrap; line-height:1.55}
.msg-item .mc{display:flex; gap:10px; margin-top:8px; font-size:12.5px}
.msg-item .mc a{color:var(--brand); font-weight:600}

/* Kod kullan kutusu */
.redeem-box{display:flex; gap:10px}
.redeem-box input{flex:1; text-transform:uppercase; letter-spacing:.04em; font-weight:600}

/* İstatistik kartları */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:22px}
.stat-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px}
.stat-card .sv{font-family:var(--fd); font-weight:800; font-size:30px; color:var(--ink); line-height:1}
.stat-card .sl{font-size:13px; color:var(--muted); margin-top:6px}
.stat-card .sd{font-size:12px; color:var(--good); margin-top:4px; font-weight:600}
.chart-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; margin-bottom:18px}
.chart-card h3{font-size:15.5px; margin-bottom:16px}
.bar-list{display:grid; gap:11px}
.bar-row{display:grid; grid-template-columns:120px 1fr 44px; gap:12px; align-items:center; font-size:13px}
.bar-row .bt{color:var(--text); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar-row .bk{height:9px; background:var(--line-2); border-radius:999px; overflow:hidden}
.bar-row .bk i{display:block; height:100%; background:var(--brand); border-radius:999px}
.bar-row .bn{text-align:right; color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums}

/* Yeni şablon küçük önizlemeleri */
.tpl-sunset{background:linear-gradient(135deg,#f5576c,#f78361 45%,#f093fb)}
.tpl-ocean{background:linear-gradient(135deg,#4facfe,#2ad0ca 55%,#00f2fe)}
.tpl{position:relative}
.tpl .tpl-pro{position:absolute; top:6px; right:6px; font-size:9.5px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#3D5AFE,#7a5cff); padding:2px 7px; border-radius:999px; letter-spacing:.03em}
.tpl.locked{opacity:.6}