/* =====================================================================
   LisansX — Yazılım Lisanslama Yönetim Paneli
   Tasarım sistemi + bileşenler + animasyonlar
   ===================================================================== */

/* ---------- 1. Değişkenler / Tema ---------- */
:root{
  --yr-1:#7c5cff;   /* menekşe */
  --yr-2:#00d4ff;   /* camgöbeği */
  --yr-3:#ff5c9d;   /* fuşya */
  --basari:#22c98b;
  --uyari:#ffb020;
  --tehlike:#ff5470;
  --bilgi:#4aa8ff;

  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-tam:999px;
  --gecis:.38s cubic-bezier(.22,1,.36,1);
  --gecis-hizli:.2s cubic-bezier(.22,1,.36,1);
  --kenar-yan:280px;
  --kenar-dar:88px;
  --ust:72px;
  --yazi:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
}

/* Koyu tema (varsayılan) */
:root,[data-tema="koyu"]{
  --zemin:#080a14;
  --zemin-2:#0d1020;
  --kart:rgba(20,24,44,.72);
  --kart-duz:#141828;
  --cam:rgba(255,255,255,.045);
  --cizgi:rgba(255,255,255,.085);
  --cizgi-guclu:rgba(255,255,255,.16);
  --metin:#eef1ff;
  --metin-2:#a2a9c9;
  --metin-3:#6b7392;
  --golge:0 18px 50px -18px rgba(0,0,0,.75);
  --golge-yumusak:0 8px 30px -12px rgba(0,0,0,.6);
  --izgara:rgba(255,255,255,.03);
  --parlama:.55;
}
[data-tema="acik"]{
  --zemin:#f3f5fb;
  --zemin-2:#eaeef8;
  --kart:rgba(255,255,255,.82);
  --kart-duz:#ffffff;
  --cam:rgba(16,22,54,.035);
  --cizgi:rgba(16,22,54,.09);
  --cizgi-guclu:rgba(16,22,54,.18);
  --metin:#141a33;
  --metin-2:#5a6386;
  --metin-3:#8890ad;
  --golge:0 18px 48px -20px rgba(31,41,90,.28);
  --golge-yumusak:0 8px 26px -14px rgba(31,41,90,.22);
  --izgara:rgba(16,22,54,.035);
  --parlama:.28;
}

/* ---------- 2. Temel ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--yazi);background:var(--zemin);color:var(--metin);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;transition:background var(--gecis),color var(--gecis);
}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
img{max-width:100%;display:block}
::selection{background:rgba(124,92,255,.35)}

/* Kaydırma çubuğu */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--cizgi-guclu);border-radius:20px}
*::-webkit-scrollbar-thumb:hover{background:var(--yr-1)}

/* ---------- 3. Arka plan atmosferi ---------- */
.atmosfer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmosfer::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--izgara) 1px,transparent 1px),
                   linear-gradient(90deg,var(--izgara) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 20%,transparent 78%);
}
.leke{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--parlama)}
.leke.a{width:520px;height:520px;background:var(--yr-1);top:-190px;left:-120px;animation:yuz 22s ease-in-out infinite}
.leke.b{width:460px;height:460px;background:var(--yr-2);top:-140px;right:-130px;animation:yuz 26s ease-in-out infinite reverse}
.leke.c{width:380px;height:380px;background:var(--yr-3);bottom:-180px;left:38%;animation:yuz 30s ease-in-out infinite}
@keyframes yuz{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(60px,40px) scale(1.12)}
  66%{transform:translate(-45px,25px) scale(.94)}
}

/* ---------- 4. Yerleşim ---------- */
.kabuk{position:relative;z-index:1;min-height:100vh}

/* Kenar çubuğu */
.yan{
  position:fixed;inset:0 auto 0 0;width:var(--kenar-yan);z-index:60;
  display:flex;flex-direction:column;gap:6px;padding:18px 14px;
  background:var(--kart);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border-right:1px solid var(--cizgi);
  transition:width var(--gecis),transform var(--gecis);
}
.marka{display:flex;align-items:center;gap:12px;padding:6px 8px 20px;min-height:56px}
.marka-ikon{
  width:40px;height:40px;flex:0 0 40px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--yr-1),var(--yr-2));color:#fff;
  box-shadow:0 8px 22px -8px var(--yr-1);position:relative;overflow:hidden;
}
.marka-ikon::after{
  content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55),transparent 70%);
  transform:translateX(-120%);animation:parilti 4.5s ease-in-out infinite;
}
@keyframes parilti{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.marka-yazi{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap;overflow:hidden}
.marka-yazi b{font-size:17px;letter-spacing:-.3px}
.marka-yazi span{font-size:11px;color:var(--metin-3);letter-spacing:.14em;text-transform:uppercase}

.yan-baslik{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--metin-3);
  padding:14px 12px 6px;white-space:nowrap;overflow:hidden;
}
.menu{display:flex;flex-direction:column;gap:3px}
.menu-og{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-sm);
  color:var(--metin-2);position:relative;white-space:nowrap;overflow:hidden;
  transition:color var(--gecis-hizli),background var(--gecis-hizli),transform var(--gecis-hizli);
}
.menu-og svg{width:19px;height:19px;flex:0 0 19px;transition:transform var(--gecis)}
.menu-og:hover{color:var(--metin);background:var(--cam);transform:translateX(3px)}
.menu-og:hover svg{transform:scale(1.12)}
.menu-og.etkin{color:#fff;background:linear-gradient(100deg,rgba(124,92,255,.9),rgba(0,212,255,.55));box-shadow:0 10px 24px -12px var(--yr-1)}
[data-tema="acik"] .menu-og.etkin{color:#fff}
.menu-og.etkin::before{
  content:"";position:absolute;left:-14px;top:50%;translate:0 -50%;width:4px;height:22px;
  border-radius:0 4px 4px 0;background:#fff;animation:cubuk .4s cubic-bezier(.22,1,.36,1);
}
@keyframes cubuk{from{height:0;opacity:0}to{height:22px;opacity:1}}
.menu-og .rozet-mini{
  margin-left:auto;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:var(--r-tam);
  background:var(--tehlike);color:#fff;box-shadow:0 0 0 0 rgba(255,84,112,.6);animation:nabiz 2.4s infinite;
}
@keyframes nabiz{0%{box-shadow:0 0 0 0 rgba(255,84,112,.55)}70%{box-shadow:0 0 0 9px rgba(255,84,112,0)}100%{box-shadow:0 0 0 0 rgba(255,84,112,0)}}

.yan-alt{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.kota{
  border:1px solid var(--cizgi);border-radius:var(--r-md);padding:14px;background:var(--cam);
  overflow:hidden;
}
.kota h4{font-size:13px;margin-bottom:4px}
.kota p{font-size:11.5px;color:var(--metin-3);margin-bottom:10px}
.kota .oran{font-size:11px;color:var(--metin-2);display:flex;justify-content:space-between;margin-top:7px}

/* Daraltılmış kenar çubuğu */
body.dar .yan{width:var(--kenar-dar)}
body.dar .yan .marka-yazi,
body.dar .yan .yan-baslik,
body.dar .yan .menu-og span:not(.rozet-mini),
body.dar .yan .kota{display:none}
body.dar .yan .menu-og{justify-content:center;padding:12px}
body.dar .ana{margin-left:var(--kenar-dar)}
body.dar .ust{left:var(--kenar-dar)}

/* Ana alan */
.ana{margin-left:var(--kenar-yan);min-height:100vh;transition:margin var(--gecis)}
.ust{
  position:fixed;top:0;left:var(--kenar-yan);right:0;height:var(--ust);z-index:50;
  display:flex;align-items:center;gap:12px;padding:0 22px;
  background:color-mix(in srgb,var(--zemin) 72%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--cizgi);transition:left var(--gecis);
}
.icerik{padding:calc(var(--ust) + 26px) 26px 40px;max-width:1560px}

/* ---------- 5. Düğmeler ---------- */
.dug{
  --dz:var(--cam);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:var(--r-sm);border:1px solid var(--cizgi);
  background:var(--dz);color:var(--metin);font-size:13.5px;font-weight:600;
  position:relative;overflow:hidden;white-space:nowrap;
  transition:transform var(--gecis-hizli),box-shadow var(--gecis-hizli),border-color var(--gecis-hizli),background var(--gecis-hizli);
}
.dug svg{width:17px;height:17px}
.dug:hover{transform:translateY(-2px);border-color:var(--cizgi-guclu);box-shadow:var(--golge-yumusak)}
.dug:active{transform:translateY(0) scale(.98)}
.dug.birincil{
  background:linear-gradient(100deg,var(--yr-1),#5b8cff);border-color:transparent;color:#fff;
  box-shadow:0 12px 26px -14px var(--yr-1);
}
.dug.birincil:hover{box-shadow:0 16px 34px -12px var(--yr-1)}
.dug.hayalet{background:transparent}
.dug.tehlikeli{color:var(--tehlike);border-color:color-mix(in srgb,var(--tehlike) 35%,transparent)}
.dug.tehlikeli:hover{background:color-mix(in srgb,var(--tehlike) 12%,transparent)}
.dug.ikon{padding:0;width:40px;height:40px;flex:0 0 40px;border-radius:var(--r-sm)}
.dug.kucuk{padding:7px 12px;font-size:12.5px;border-radius:10px}
.dug.ikon.kucuk{padding:0;width:32px;height:32px;flex:0 0 32px;border-radius:10px}
.dug[disabled]{opacity:.45;pointer-events:none}
/* dalga efekti */
.dalga{position:absolute;border-radius:50%;background:rgba(255,255,255,.4);transform:scale(0);animation:dalgala .6s linear;pointer-events:none}
@keyframes dalgala{to{transform:scale(4);opacity:0}}

/* ---------- 6. Üst çubuk bileşenleri ---------- */
.ara-kutu{
  flex:1;max-width:430px;display:flex;align-items:center;gap:10px;
  padding:0 14px;height:42px;border-radius:var(--r-tam);
  background:var(--cam);border:1px solid var(--cizgi);cursor:text;
  transition:border-color var(--gecis-hizli),box-shadow var(--gecis-hizli),background var(--gecis-hizli);
}
.ara-kutu:hover,.ara-kutu:focus-within{border-color:color-mix(in srgb,var(--yr-1) 55%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--yr-1) 14%,transparent)}
.ara-kutu svg{width:17px;height:17px;color:var(--metin-3);flex:0 0 17px}
.ara-kutu input{flex:1;background:none;border:0;outline:0;font-size:13.5px}
.ara-kutu input::placeholder{color:var(--metin-3)}
.tus{
  font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:6px;
  border:1px solid var(--cizgi);color:var(--metin-3);background:var(--cam);white-space:nowrap;
}
.bosluk{flex:1}

.zil{position:relative}
.zil .nokta{
  position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;
  background:var(--tehlike);border:2px solid var(--zemin);animation:nabiz 2.4s infinite;
}
.avatar{
  width:38px;height:38px;border-radius:var(--r-tam);flex:0 0 38px;display:grid;place-items:center;
  font-weight:700;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--yr-3),var(--yr-1));
  border:2px solid var(--cizgi);
}
.kullanici{
  display:flex;align-items:center;gap:10px;padding:5px 12px 5px 5px;border-radius:var(--r-tam);
  border:1px solid var(--cizgi);background:var(--cam);transition:all var(--gecis-hizli);
}
.kullanici:hover{border-color:var(--cizgi-guclu);transform:translateY(-1px)}
.kullanici .kim{line-height:1.2;text-align:left}
.kullanici .kim b{font-size:13px;display:block}
.kullanici .kim span{font-size:11px;color:var(--metin-3)}

/* Açılır menü */
.acilir{
  position:absolute;top:calc(100% + 12px);right:0;min-width:290px;z-index:70;
  background:var(--kart-duz);border:1px solid var(--cizgi);border-radius:var(--r-md);
  box-shadow:var(--golge);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:top right;
  transition:opacity var(--gecis-hizli),transform var(--gecis-hizli),visibility var(--gecis-hizli);
}
.acilir.acik{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.acilir h5{margin:0;padding:8px 10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--metin-3)}
.acilir-og{
  display:flex;gap:11px;align-items:flex-start;padding:10px;border-radius:10px;
  transition:background var(--gecis-hizli);cursor:pointer;
}
.acilir-og:hover{background:var(--cam)}
.acilir-og .ik{width:32px;height:32px;flex:0 0 32px;border-radius:9px;display:grid;place-items:center}
.acilir-og p{font-size:13px;line-height:1.35}
.acilir-og small{color:var(--metin-3);font-size:11.5px}
.ayirac{height:1px;background:var(--cizgi);margin:6px 4px}

/* ---------- 7. Sayfa başlığı ---------- */
.sayfa-bas{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.sayfa-bas h1{font-size:27px;letter-spacing:-.6px;font-weight:750}
.sayfa-bas .yol{font-size:12.5px;color:var(--metin-3);margin-bottom:4px}
.sayfa-bas p{color:var(--metin-2);font-size:13.5px;margin-top:3px}
.bas-eylem{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}

/* ---------- 8. Kart / ızgara ---------- */
.kart{
  background:var(--kart);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--cizgi);border-radius:var(--r-lg);padding:20px;
  position:relative;overflow:hidden;
  transition:transform var(--gecis),border-color var(--gecis),box-shadow var(--gecis);
}
.kart-bas{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.kart-bas h3{font-size:15.5px;font-weight:680;letter-spacing:-.2px}
.kart-bas p{font-size:12px;color:var(--metin-3)}
.kart-bas .sag{margin-left:auto;display:flex;gap:8px;align-items:center}

.izgara{display:grid;gap:18px}
.i4{grid-template-columns:repeat(4,minmax(0,1fr))}
.i3{grid-template-columns:repeat(3,minmax(0,1fr))}
.i2{grid-template-columns:repeat(2,minmax(0,1fr))}
.i-8-4{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr)}
.i-7-5{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}

/* İstatistik kartı */
.ist{cursor:default}
.ist::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity var(--gecis);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--ton) 16%,transparent),transparent 62%);
}
.ist:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--ton) 42%,transparent);box-shadow:0 22px 44px -26px var(--ton)}
.ist:hover::before{opacity:1}
.ist-ust{display:flex;align-items:center;gap:12px;margin-bottom:14px;position:relative}
.ist-ik{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:0 0 44px;
  background:color-mix(in srgb,var(--ton) 16%,transparent);color:var(--ton);
  border:1px solid color-mix(in srgb,var(--ton) 26%,transparent);
  transition:transform var(--gecis);
}
.ist:hover .ist-ik{transform:rotate(-8deg) scale(1.08)}
.ist-ik svg{width:21px;height:21px}
.ist-et{font-size:12.5px;color:var(--metin-2);font-weight:560}
.ist-deger{font-size:31px;font-weight:760;letter-spacing:-1.2px;line-height:1.1;position:relative}
.ist-alt{display:flex;align-items:center;gap:8px;margin-top:8px;position:relative}
.fark{
  display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:670;
  padding:3px 8px;border-radius:var(--r-tam);
}
.fark svg{width:13px;height:13px}
.fark.arti{color:var(--basari);background:color-mix(in srgb,var(--basari) 14%,transparent)}
.fark.eksi{color:var(--tehlike);background:color-mix(in srgb,var(--tehlike) 14%,transparent)}
.ist-alt small{font-size:11.5px;color:var(--metin-3)}
.kivilcim{position:absolute;right:16px;bottom:14px;width:96px;height:38px;opacity:.85}

/* ---------- 9. Grafikler ---------- */
.grafik-sar{position:relative;width:100%;height:262px}
.grafik-sar svg{width:100%;height:100%;overflow:visible}
.cizgi-yol{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--uz);stroke-dashoffset:var(--uz);animation:ciz 1.8s cubic-bezier(.22,1,.36,1) forwards}
@keyframes ciz{to{stroke-dashoffset:0}}
.alan-dolgu{opacity:0;animation:belir .9s .7s forwards}
@keyframes belir{to{opacity:1}}
.izgara-c{stroke:var(--cizgi);stroke-width:1;stroke-dasharray:3 6}
.eksen-y{font-size:10.5px;fill:var(--metin-3)}
.nokta-c{r:0;animation:noktacik .4s forwards}
@keyframes noktacik{to{r:4.5}}
.imlec-cizgi{stroke:var(--yr-2);stroke-width:1;stroke-dasharray:4 4;opacity:0;transition:opacity .15s}

.ipucu{
  position:absolute;pointer-events:none;z-index:5;padding:9px 12px;border-radius:10px;
  background:var(--kart-duz);border:1px solid var(--cizgi-guclu);box-shadow:var(--golge);
  font-size:12px;white-space:nowrap;opacity:0;transform:translate(-50%,-118%) scale(.94);
  transition:opacity .16s,transform .16s;
}
.ipucu.gor{opacity:1;transform:translate(-50%,-128%) scale(1)}
.ipucu b{display:block;font-size:14px;margin-top:2px}

/* Halka grafik */
.halka-sar{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}
.halka{position:relative;width:186px;height:186px;flex:0 0 186px}
.halka svg{transform:rotate(-90deg)}
.halka circle{fill:none;stroke-width:15;stroke-linecap:round;
  transition:stroke-dasharray 1.1s cubic-bezier(.22,1,.36,1),stroke-width .2s}
.halka circle:hover{stroke-width:19}
.halka-orta{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.halka-orta b{font-size:29px;font-weight:770;letter-spacing:-1px}
.halka-orta span{font-size:11.5px;color:var(--metin-3)}
.efsane{display:flex;flex-direction:column;gap:11px;min-width:150px}
.efsane-og{display:flex;align-items:center;gap:10px;font-size:13px;cursor:default;transition:transform var(--gecis-hizli)}
.efsane-og:hover{transform:translateX(4px)}
.efsane-og i{width:10px;height:10px;border-radius:4px;flex:0 0 10px}
.efsane-og b{margin-left:auto;font-variant-numeric:tabular-nums}

/* Çubuk liste */
.cubuk-liste{display:flex;flex-direction:column;gap:15px}
.cubuk-og .ust-s{display:flex;align-items:center;gap:10px;font-size:13px;margin-bottom:7px}
.cubuk-og .ust-s b{margin-left:auto;font-variant-numeric:tabular-nums;font-size:13px}
.cubuk-og .ust-s small{color:var(--metin-3);font-size:11.5px}
.ray{height:8px;border-radius:var(--r-tam);background:var(--cam);overflow:hidden;position:relative}
.dolgu{
  height:100%;border-radius:var(--r-tam);width:0;
  background:linear-gradient(90deg,var(--yr-1),var(--yr-2));
  transition:width 1.3s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden;
}
.dolgu::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-100%);animation:kayma 2.2s ease-in-out infinite;
}
@keyframes kayma{to{transform:translateX(100%)}}

/* ---------- 10. Rozet & durum ---------- */
.rozet{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--r-tam);
  font-size:11.5px;font-weight:670;letter-spacing:.01em;white-space:nowrap;
  background:color-mix(in srgb,var(--ton) 14%,transparent);color:var(--ton);
  border:1px solid color-mix(in srgb,var(--ton) 26%,transparent);
}
.rozet i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px}
.rozet.aktif{--ton:var(--basari)}
.rozet.askida{--ton:var(--uyari)}
.rozet.iptal{--ton:var(--tehlike)}
.rozet.deneme{--ton:var(--bilgi)}
.rozet.suresi{--ton:var(--metin-3)}
.rozet.aktif i{animation:canli 1.8s infinite}
@keyframes canli{0%,100%{opacity:1;box-shadow:0 0 0 0 currentColor}50%{opacity:.55;box-shadow:0 0 0 4px transparent}}

/* ---------- 11. Tablo ---------- */
.tablo-sar{overflow-x:auto;margin:0 -20px -20px;padding:0 20px 4px}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:820px}
thead th{
  text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--metin-3);
  font-weight:640;padding:11px 14px;border-bottom:1px solid var(--cizgi);white-space:nowrap;
}
tbody td{padding:14px;border-bottom:1px solid var(--cizgi);vertical-align:middle}
tbody tr{transition:background var(--gecis-hizli),transform var(--gecis-hizli)}
tbody tr:hover{background:var(--cam)}
tbody tr:last-child td{border-bottom:0}
.hucre-ana{display:flex;align-items:center;gap:12px}
.mini-ik{
  width:36px;height:36px;flex:0 0 36px;border-radius:11px;display:grid;place-items:center;
  font-weight:700;font-size:12.5px;color:#fff;
}
.hucre-ana b{display:block;font-size:13.5px;font-weight:640}
.hucre-ana small{color:var(--metin-3);font-size:11.5px}
.kod{
  font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:12px;letter-spacing:.2px;
  padding:4px 9px;border-radius:8px;background:var(--cam);border:1px solid var(--cizgi);
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:all var(--gecis-hizli);
}
.kod:hover{border-color:var(--yr-1);color:var(--yr-1)}
.kod svg{width:13px;height:13px;opacity:.6}
.koltuk-sar{min-width:118px}
.koltuk-sar .ust-s{display:flex;justify-content:space-between;font-size:11.5px;color:var(--metin-2);margin-bottom:5px}
.dug-grup{display:flex;gap:6px;flex-wrap:nowrap;justify-content:flex-end}
.daralt{width:1%;white-space:nowrap}

/* Filtre çubuğu */
.arac-cubugu{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.cipler{display:flex;gap:7px;flex-wrap:wrap}
.cip{
  padding:7px 14px;border-radius:var(--r-tam);border:1px solid var(--cizgi);background:var(--cam);
  font-size:12.5px;font-weight:600;color:var(--metin-2);cursor:pointer;
  transition:all var(--gecis-hizli);display:inline-flex;align-items:center;gap:7px;
}
.cip:hover{color:var(--metin);border-color:var(--cizgi-guclu);transform:translateY(-1px)}
.cip.etkin{background:linear-gradient(100deg,var(--yr-1),#5b8cff);color:#fff;border-color:transparent;box-shadow:0 8px 20px -12px var(--yr-1)}
.cip .sy{font-size:11px;padding:1px 7px;border-radius:var(--r-tam);background:rgba(255,255,255,.16)}
.cip:not(.etkin) .sy{background:var(--cam);color:var(--metin-3)}

/* Sayfalama */
.sayfalama{display:flex;align-items:center;gap:8px;padding-top:16px;flex-wrap:wrap}
.sayfalama .bilgi{font-size:12.5px;color:var(--metin-3);margin-right:auto}
.sy-dug{
  min-width:36px;height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--cizgi);
  background:var(--cam);font-size:13px;font-weight:600;display:inline-grid;place-items:center;
  transition:all var(--gecis-hizli);
}
.sy-dug:hover{border-color:var(--yr-1);color:var(--yr-1)}
.sy-dug.etkin{background:var(--yr-1);color:#fff;border-color:transparent}

/* ---------- 12. Zaman çizelgesi / akış ---------- */
.akis{display:flex;flex-direction:column;position:relative}
.akis::before{content:"";position:absolute;left:19px;top:14px;bottom:14px;width:1.5px;background:var(--cizgi)}
.akis-og{display:flex;gap:14px;padding:11px 0;position:relative}
.akis-og .ik{
  width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;z-index:1;
  background:var(--kart-duz);border:1px solid var(--cizgi);color:var(--ton);
  transition:transform var(--gecis),box-shadow var(--gecis);
}
.akis-og:hover .ik{transform:scale(1.1);box-shadow:0 0 0 5px color-mix(in srgb,var(--ton) 12%,transparent)}
.akis-og .ik svg{width:17px;height:17px}
.akis-og .gv{flex:1;min-width:0}
.akis-og p{font-size:13.5px;line-height:1.45}
.akis-og p b{font-weight:660}
.akis-og time{font-size:11.5px;color:var(--metin-3);display:block;margin-top:3px}

/* ---------- 13. Ürün kartları ---------- */
.urun{padding:0;overflow:hidden;display:flex;flex-direction:column}
.urun:hover{transform:translateY(-6px);box-shadow:var(--golge);border-color:var(--cizgi-guclu)}
.urun-kapak{
  height:118px;position:relative;display:grid;place-items:center;
  background:linear-gradient(135deg,color-mix(in srgb,var(--ton) 55%,transparent),color-mix(in srgb,var(--ton) 12%,transparent));
  overflow:hidden;
}
.urun-kapak::after{
  content:"";position:absolute;inset:0;opacity:.35;
  background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.5) 1px,transparent 1px),
                   radial-gradient(circle at 70% 65%,rgba(255,255,255,.35) 1px,transparent 1px);
  background-size:26px 26px,34px 34px;
  transition:transform 1.2s var(--gecis);
}
.urun:hover .urun-kapak::after{transform:scale(1.35) rotate(6deg)}
.urun-kapak .amblem{
  width:58px;height:58px;border-radius:18px;display:grid;place-items:center;z-index:1;
  background:rgba(255,255,255,.16);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.28);
  color:#fff;font-weight:800;font-size:19px;transition:transform var(--gecis);
}
.urun:hover .amblem{transform:scale(1.1) rotate(-6deg)}
.urun-gv{padding:17px;display:flex;flex-direction:column;gap:12px;flex:1}
.urun-gv h4{font-size:15px;letter-spacing:-.2px}
.urun-gv .ac{font-size:12.5px;color:var(--metin-2);line-height:1.5}
.urun-ist{display:flex;gap:16px;margin-top:auto;padding-top:12px;border-top:1px solid var(--cizgi)}
.urun-ist div b{display:block;font-size:16px;font-weight:720;letter-spacing:-.4px}
.urun-ist div span{font-size:11px;color:var(--metin-3)}

/* ---------- 14. Form / ayarlar ---------- */
.sekmeler{display:flex;gap:4px;padding:5px;border-radius:var(--r-md);background:var(--cam);
  border:1px solid var(--cizgi);overflow-x:auto;position:relative}
.sekme{
  padding:9px 16px;border-radius:10px;font-size:13px;font-weight:620;color:var(--metin-2);
  white-space:nowrap;transition:all var(--gecis-hizli);
}
.sekme:hover{color:var(--metin)}
.sekme.etkin{background:var(--kart-duz);color:var(--metin);box-shadow:var(--golge-yumusak)}

.alan{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.alan label{font-size:12.5px;font-weight:620;color:var(--metin-2)}
.alan .ipuc{font-size:11.5px;color:var(--metin-3)}
.giris,select.giris,textarea.giris{
  width:100%;padding:11px 14px;border-radius:var(--r-sm);background:var(--cam);
  border:1px solid var(--cizgi);outline:0;font-size:13.5px;
  transition:border-color var(--gecis-hizli),box-shadow var(--gecis-hizli),background var(--gecis-hizli);
}
.giris:focus{border-color:var(--yr-1);box-shadow:0 0 0 4px color-mix(in srgb,var(--yr-1) 15%,transparent)}
.giris::placeholder{color:var(--metin-3)}
textarea.giris{resize:vertical;min-height:96px;font-family:ui-monospace,Consolas,monospace;font-size:12.5px}
select.giris{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7392' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}

.anahtar-satir{
  display:flex;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--cizgi);
}
.anahtar-satir:last-child{border-bottom:0}
.anahtar-satir .gv{flex:1;min-width:0}
.anahtar-satir b{font-size:13.5px;font-weight:630;display:block}
.anahtar-satir small{font-size:12px;color:var(--metin-3)}
.svic{
  width:48px;height:27px;flex:0 0 48px;border-radius:var(--r-tam);background:var(--cizgi-guclu);
  position:relative;cursor:pointer;transition:background var(--gecis);border:0;
}
.svic::after{
  content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);
  transition:transform var(--gecis),width var(--gecis);
}
.svic.acik{background:linear-gradient(100deg,var(--yr-1),var(--yr-2))}
.svic.acik::after{transform:translateX(21px)}
.svic:active::after{width:26px}
.svic.acik:active::after{transform:translateX(16px)}

/* ---------- 15. Modal ---------- */
.perde{
  position:fixed;inset:0;z-index:90;background:rgba(4,6,16,.62);backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity var(--gecis),visibility var(--gecis);
}
.perde.acik{opacity:1;visibility:visible}
.modal{
  width:min(560px,100%);max-height:88vh;overflow:auto;background:var(--kart-duz);
  border:1px solid var(--cizgi);border-radius:var(--r-xl);box-shadow:var(--golge);padding:26px;
  transform:translateY(24px) scale(.96);opacity:0;transition:transform var(--gecis),opacity var(--gecis);
}
.perde.acik .modal{transform:translateY(0) scale(1);opacity:1}
.modal-bas{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px}
.modal-bas h3{font-size:19px;letter-spacing:-.4px}
.modal-bas p{font-size:13px;color:var(--metin-2);margin-top:3px}
.modal-alt{display:flex;gap:10px;justify-content:flex-end;margin-top:24px;padding-top:18px;border-top:1px solid var(--cizgi)}

/* Komut paleti */
.palet{width:min(620px,100%);align-self:start;margin-top:12vh;padding:0;overflow:hidden}
.palet-ara{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--cizgi)}
.palet-ara svg{width:19px;height:19px;color:var(--metin-3)}
.palet-ara input{flex:1;background:none;border:0;outline:0;font-size:16px}
.palet-liste{max-height:44vh;overflow:auto;padding:8px}
.palet-og{
  display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;cursor:pointer;
  transition:background var(--gecis-hizli);
}
.palet-og:hover,.palet-og.sec{background:var(--cam)}
.palet-og .ik{width:32px;height:32px;flex:0 0 32px;border-radius:9px;display:grid;place-items:center;background:var(--cam)}
.palet-og b{font-size:13.5px;font-weight:600}
.palet-og small{display:block;color:var(--metin-3);font-size:11.5px}
.palet-og .tus{margin-left:auto}

/* ---------- 16. Detay çekmecesi ---------- */
.cekmece{
  position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);z-index:95;
  background:var(--kart-duz);border-left:1px solid var(--cizgi);box-shadow:var(--golge);
  transform:translateX(102%);transition:transform var(--gecis);
  display:flex;flex-direction:column;
}
.cekmece.acik{transform:translateX(0)}
.cekmece-bas{padding:22px;border-bottom:1px solid var(--cizgi);display:flex;align-items:flex-start;gap:12px}
.cekmece-gv{padding:22px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:20px}
.cekmece-alt{padding:18px 22px;border-top:1px solid var(--cizgi);display:flex;gap:10px}
.veri-satir{display:flex;gap:14px;font-size:13px;padding:9px 0;border-bottom:1px dashed var(--cizgi)}
.veri-satir:last-child{border-bottom:0}
.veri-satir span{color:var(--metin-3);min-width:118px}
.veri-satir b{margin-left:auto;text-align:right;font-weight:620}

/* ---------- 17. Bildirim (toast) ---------- */
.toast-alan{position:fixed;bottom:22px;right:22px;z-index:120;display:flex;flex-direction:column;gap:10px;max-width:min(360px,calc(100vw - 40px))}
.toast{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-md);
  background:var(--kart-duz);border:1px solid var(--cizgi);box-shadow:var(--golge);
  animation:toast-gir .45s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden;
}
.toast.cik{animation:toast-cik .3s forwards}
@keyframes toast-gir{from{transform:translateX(120%) scale(.9);opacity:0}to{transform:none;opacity:1}}
@keyframes toast-cik{to{transform:translateX(120%) scale(.9);opacity:0}}
.toast .ik{width:32px;height:32px;flex:0 0 32px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ton) 15%,transparent);color:var(--ton)}
.toast b{font-size:13.5px;display:block}
.toast small{font-size:12px;color:var(--metin-3)}
.toast::after{
  content:"";position:absolute;left:0;bottom:0;height:2.5px;width:100%;background:var(--ton);
  transform-origin:left;animation:sure 4s linear forwards;
}
@keyframes sure{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ---------- 18. İskelet yükleme ---------- */
.iskelet{
  border-radius:8px;background:linear-gradient(90deg,var(--cam) 25%,color-mix(in srgb,var(--metin-3) 14%,transparent) 37%,var(--cam) 63%);
  background-size:400% 100%;animation:iskele 1.3s ease-in-out infinite;
}
@keyframes iskele{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ---------- 19. Giriş animasyonları ---------- */
.gir{opacity:0;transform:translateY(18px);animation:girsin .6s cubic-bezier(.22,1,.36,1) forwards}
@keyframes girsin{to{opacity:1;transform:none}}
.gir[data-g="1"]{animation-delay:.04s}.gir[data-g="2"]{animation-delay:.08s}
.gir[data-g="3"]{animation-delay:.12s}.gir[data-g="4"]{animation-delay:.16s}
.gir[data-g="5"]{animation-delay:.2s}.gir[data-g="6"]{animation-delay:.24s}
.gir[data-g="7"]{animation-delay:.28s}.gir[data-g="8"]{animation-delay:.32s}

.sayfa{display:none}
.sayfa.etkin{display:block}

/* ---------- 20. Yardımcılar ---------- */
.gizle{display:none!important}
.mobil-dug{display:none}
.ort{display:flex;align-items:center;gap:8px}
.ust-bosluk{margin-top:18px}
.metin-2{color:var(--metin-2)}
.metin-3{color:var(--metin-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Boş durum */
.bos{display:grid;place-items:center;gap:12px;padding:56px 20px;text-align:center}
.bos .ik{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;
  background:var(--cam);border:1px solid var(--cizgi);color:var(--metin-3)}
.bos h4{font-size:16px}
.bos p{font-size:13px;color:var(--metin-3);max-width:340px}

/* Örtü (mobil) */
.ortu{
  position:fixed;inset:0;background:rgba(4,6,16,.58);backdrop-filter:blur(3px);z-index:55;
  opacity:0;visibility:hidden;transition:opacity var(--gecis),visibility var(--gecis);
}
.ortu.acik{opacity:1;visibility:visible}

/* ---------- 21. Duyarlı ---------- */
@media (max-width:1420px){
  .i4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1150px){
  .i-8-4,.i-7-5,.i3{grid-template-columns:minmax(0,1fr)}
  .i2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:980px){
  :root{--ust:64px}
  .yan{transform:translateX(-104%);width:290px;box-shadow:var(--golge)}
  .yan.acik{transform:none}
  body.dar .yan{width:290px}
  body.dar .yan .marka-yazi,body.dar .yan .yan-baslik,
  body.dar .yan .menu-og span:not(.rozet-mini),body.dar .yan .kota{display:revert}
  body.dar .yan .menu-og{justify-content:flex-start;padding:11px 12px}
  .ana,body.dar .ana{margin-left:0}
  .ust,body.dar .ust{left:0}
  .mobil-dug{display:inline-grid}
  .daralt-dug{display:none}
  .icerik{padding:calc(var(--ust) + 18px) 16px 34px}
  .ara-kutu{max-width:none}
  .kullanici .kim{display:none}
  .kullanici{padding:4px}
}
@media (max-width:760px){
  .i4{grid-template-columns:minmax(0,1fr)}
  .sayfa-bas h1{font-size:22px}
  .bas-eylem{margin-left:0;width:100%}
  .bas-eylem .dug{flex:1}
  .ara-kutu .tus{display:none}
  .kart{padding:16px;border-radius:var(--r-md)}
  .halka-sar{flex-direction:column}
  .modal{padding:20px;border-radius:var(--r-lg)}
  .toast-alan{left:14px;right:14px;bottom:14px;max-width:none}

  /* Tabloyu karta çevir */
  .tablo-sar{overflow:visible;margin:0;padding:0}
  table.duyarli{min-width:0;display:block}
  table.duyarli thead{display:none}
  table.duyarli tbody,table.duyarli tr,table.duyarli td{display:block;width:100%}
  table.duyarli tr{
    border:1px solid var(--cizgi);border-radius:var(--r-md);padding:14px;margin-bottom:12px;
    background:var(--cam);
  }
  table.duyarli td{border:0;padding:7px 0;display:flex;align-items:center;gap:14px}
  table.duyarli td::before{
    content:attr(data-et);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--metin-3);font-weight:640;flex:0 0 96px;
  }
  table.duyarli td.daralt{width:auto}
  table.duyarli td:first-child{border-bottom:1px solid var(--cizgi);padding-bottom:12px;margin-bottom:6px}
  table.duyarli td:first-child::before{display:none}
  table.duyarli .dug-grup{justify-content:flex-start;flex-wrap:wrap}
  .koltuk-sar{flex:1}
}
@media (max-width:420px){
  .ist-deger{font-size:26px}
  .kivilcim{display:none}
  .sayfa-bas .yol{display:none}
}

/* Hareket azaltma */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Yazdırma */
@media print{
  .yan,.ust,.toast-alan,.atmosfer,.bas-eylem{display:none!important}
  .ana{margin:0}.icerik{padding:0}
  .kart{break-inside:avoid;border:1px solid #ddd}
}