/* ==========================================================================
   OpenPlay — Windows 11 / Microsoft Store arayüzü
   Fluent Design · Mica · Acrylic · Segoe UI Variable
   ========================================================================== */

:root{
  /* --- Yüzeyler (Acrylic) --- */
  --mica:            #F3F3F3;
  --mica-alt:        #EEEEEE;
  --acrylic:         rgba(252,252,252,.72);
  --acrylic-ince:    rgba(249,249,249,.55);
  --acrylic-koyu:    rgba(0,0,0,.30);
  --card:            #FBFBFB;
  --card-2:          #FFFFFF;
  --card-hover:      #F6F6F6;
  --flyout:          rgba(252,252,252,.85);

  /* --- Çizgiler --- */
  --cizgi:           rgba(0,0,0,.0578);
  --cizgi-2:         rgba(0,0,0,.11);
  --cizgi-kart:      rgba(0,0,0,.0578);

  /* --- Metin --- */
  --metin:           #1A1A1A;
  --metin-2:         #5D5D5D;
  --metin-3:         #8A8A8A;
  --metin-beyaz:     #FFFFFF;

  /* --- Vurgu --- */
  --vurgu:           #0F6CBD;
  --vurgu-hover:     #115EA3;
  --vurgu-bas:       #0C3B5E;
  --vurgu-acik:      #4CC2FF;

  /* --- Yükselti --- */
  --g1: 0 1px 2px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.032);
  --g2: 0 2px 4px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.032);
  --g3: 0 8px 16px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.032);
  --g4: 0 16px 32px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.032);
  --g5: 0 28px 56px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.032);

  /* --- Ölçü --- */
  --r-sm:  4px;
  --r-ctl: 6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-pill: 999px;

  /* --- Tipografi --- */
  --font: 'Segoe UI Variable','Segoe UI Variable Display','Segoe UI',
          -apple-system, 'Inter', system-ui, sans-serif;

  --hareket-1: cubic-bezier(.16,1,.3,1);
  --hareket-2: cubic-bezier(.25,.46,.45,.94);
  --h1: cubic-bezier(.33,0,.67,1);
}

body.dark{
  --mica:         #202020;
  --mica-alt:     #1A1A1A;
  --acrylic:      rgba(32,32,32,.72);
  --acrylic-ince: rgba(40,40,40,.55);
  --acrylic-koyu: rgba(0,0,0,.50);
  --card:         #2D2D2D;
  --card-2:       #272727;
  --card-hover:   #333333;
  --flyout:       rgba(43,43,43,.85);

  --cizgi:        rgba(255,255,255,.0698);
  --cizgi-2:      rgba(255,255,255,.12);
  --cizgi-kart:   rgba(255,255,255,.0698);

  --metin:        #FFFFFF;
  --metin-2:      #C5C5C5;
  --metin-3:      #909090;

  --vurgu:        #4CC2FF;
  --vurgu-hover:  #62C8FF;
  --vurgu-bas:    #005A9E;

  --g1: 0 1px 2px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.0578);
  --g2: 0 2px 4px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.0578);
  --g3: 0 8px 16px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.0578);
  --g4: 0 16px 32px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.0578);
  --g5: 0 28px 56px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.0578);
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  font-family:var(--font);
  background:var(--mica);
  color:var(--metin);
  font-size:14px; line-height:1.5;
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-weight:400;
  transition:background .3s var(--hareket-2), color .3s var(--hareket-2);
}

/* Mica dokusu */
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1000px 700px at 8% -10%,  rgba(15,108,189,.10), transparent 60%),
    radial-gradient(900px 620px at 94% 2%,   rgba(76,194,255,.08), transparent 58%),
    radial-gradient(800px 600px at 50% 108%, rgba(120,80,220,.07), transparent 60%);
}
body.dark::before{ opacity:.4 }

img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
button{ background:none; border:0; cursor:pointer }
ul,ol{ list-style:none }

::selection{ background:var(--vurgu); color:#fff }
::-webkit-scrollbar{ width:12px; height:12px }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{ background:var(--cizgi-2); border:4px solid transparent; background-clip:content-box; border-radius:99px }
::-webkit-scrollbar-thumb:hover{ background:var(--metin-3); background-clip:content-box }

/* ==========================================================================
   ÜST ÇUBUK
   ========================================================================== */
.ustcubuk{
  position:fixed; top:0; left:68px; right:0; height:56px; z-index:90;
  display:flex; align-items:center; gap:12px; padding:0 24px;
  background:var(--acrylic-ince);
  backdrop-filter:blur(40px) saturate(160%);
  -webkit-backdrop-filter:blur(40px) saturate(160%);
  border-bottom:1px solid var(--cizgi);
}
.cubuk-bas{ font-size:15px; font-weight:600; letter-spacing:-.1px }
.cubuk-bos{ flex:1 }

.arama-cubuk{
  flex:0 1 420px; position:relative;
  display:flex; align-items:center; gap:9px;
  background:var(--acrylic); border:1px solid var(--cizgi-2);
  border-radius:var(--r-pill); padding:7px 15px; height:34px;
  transition:.18s var(--hareket-2);
}
.arama-cubuk:focus-within{
  background:var(--card-2);
  border-color:var(--vurgu);
  box-shadow:0 0 0 1px var(--vurgu), var(--g2);
}
.arama-cubuk input{
  flex:1; background:none; border:0; outline:0;
  font-size:13.5px; color:var(--metin); min-width:0;
}
.arama-cubuk input::placeholder{ color:var(--metin-3) }

.cubuk-btn{
  width:34px; height:34px; border-radius:var(--r-ctl);
  display:grid; place-items:center; font-size:16px; color:var(--metin-2);
  transition:.15s var(--hareket-2);
}
.cubuk-btn:hover{ background:var(--acrylic-ince); color:var(--metin) }

.cubuk-avatar{
  width:32px; height:32px; border-radius:var(--r-pill);
  background:var(--vurgu); color:#fff;
  display:grid; place-items:center;
  font-size:13px; font-weight:700;
}

.yemek-btn{ display:none; width:34px; height:34px; border-radius:var(--r-ctl); font-size:17px }

/* ==========================================================================
   İÇERİK
   ========================================================================== */
.icerik{
  margin-left:68px; padding:80px 32px 60px;
  max-width:1700px; min-height:100vh;
}
.sayfa{ animation:sayfaGir .32s var(--hareket-1) both }
@keyframes sayfaGir{ from{ opacity:0; transform:translateY(8px) } }

.yukleme{
  position:fixed; inset:0; z-index:500;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background:var(--mica);
}
.yukleme-halka{
  width:44px; height:44px; border-radius:50%;
  border:3px solid var(--cizgi-2); border-top-color:var(--vurgu);
  animation:don .8s linear infinite;
}
@keyframes don{ to{ transform:rotate(360deg) } }

/* ==========================================================================
   HERO — Store banner
   ========================================================================== */
.store-hero{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  min-height:420px; display:flex; align-items:flex-end;
  padding:40px; margin-bottom:36px;
  background:linear-gradient(120deg,#0F6CBD,#3B7DD8 45%,#7C5CFF);
  box-shadow:var(--g4);
  isolation:isolate;
}
.store-hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(700px 400px at 15% 15%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(600px 400px at 85% 90%, rgba(0,0,0,.24), transparent 62%);
}
.store-hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom, #000, transparent 70%);
}
.store-hero-ic{
  font-size:88px; margin-bottom:16px;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.34));
}
.store-hero h1{
  font-size:clamp(30px,4.6vw,52px); font-weight:700;
  letter-spacing:-1.6px; line-height:1.08; margin-bottom:12px; color:#fff;
}
.store-hero p{
  font-size:clamp(14px,1.6vw,17px); color:rgba(255,255,255,.9);
  max-width:56ch; margin-bottom:24px;
}
.store-hero-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 11px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.24);
  font-size:11.5px; font-weight:600; color:#fff; margin-bottom:16px;
}

/* ==========================================================================
   BUTONLAR — WinUI
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:32px; padding:5px 16px;
  border-radius:var(--r-ctl);
  font-size:13.5px; font-weight:600; white-space:nowrap;
  cursor:pointer; border:1px solid var(--cizgi-2);
  background:var(--card); color:var(--metin);
  transition:.14s var(--hareket-2);
  position:relative; overflow:hidden;
}
.btn:hover{ background:var(--card-hover) }
.btn:active{ background:var(--card); opacity:.7; transform:scale(.98) }

.btn-vurgu{
  background:var(--vurgu); color:#fff; border-color:transparent;
  box-shadow:var(--g1);
}
.btn-vurgu:hover{ background:var(--vurgu-hover) }
.btn-vurgu:active{ background:var(--vurgu-bas) }

.btn-sade{ background:var(--acrylic-ince); border-color:transparent }
.btn-sade:hover{ background:var(--acrylic-koyu) }

.btn-kahraman{ height:38px; padding:7px 22px; font-size:14.5px }
.btn-ikon{ width:32px; padding:0 }
.btn-kucuk{ height:26px; padding:2px 11px; font-size:12.5px }

/* ==========================================================================
   BÖLÜM
   ========================================================================== */
.bolum{ margin-bottom:40px }
.bolum-bas{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:16px;
}
.bolum-bas h2{
  font-size:19px; font-weight:600; letter-spacing:-.3px;
  display:flex; align-items:center; gap:9px;
}
.bolum-bas p{ font-size:12.5px; color:var(--metin-2); margin-top:3px }
.bolum-link{
  font-size:13px; font-weight:600; color:var(--vurgu);
  display:flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:var(--r-ctl);
  transition:.14s var(--hareket-2);
}
.bolum-link:hover{ background:var(--acrylic-ince); gap:9px }

/* ==========================================================================
   UYGULAMA KARTI — Store tile
   ========================================================================== */
.uygulama-izgara{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px;
}
.uygulama-serit{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(180px,1fr);
  gap:16px; overflow-x:auto; padding-bottom:12px;
  scroll-snap-type:x proximity; scrollbar-width:thin;
}
.uygulama-serit > *{ scroll-snap-align:start }
.uygulama-serit::-webkit-scrollbar{ height:10px }
.uygulama-serit::-webkit-scrollbar-thumb{ background:var(--cizgi-2); border-radius:99px }

.uygulama{
  display:block; position:relative;
  border-radius:var(--r-md);
  transition:.2s var(--hareket-2);
  animation:kutuGir .34s var(--hareket-1) both;
}
@keyframes kutuGir{ from{ opacity:0; transform:translateY(10px) } }

.uygulama-gorsel{
  position:relative; aspect-ratio:16/10;
  border-radius:var(--r-md); overflow:hidden;
  background:var(--card); box-shadow:var(--g1);
  transition:.2s var(--hareket-2);
}
.uygulama-gorsel img{ width:100%; height:100%; object-fit:cover }
.uygulama:hover .uygulama-gorsel{ box-shadow:var(--g4) }
.uygulama:hover .uygulama-gorsel img{ transform:scale(1.04) }

.uygulama-rozet{
  position:absolute; top:8px; left:8px;
  padding:3px 9px; border-radius:var(--r-pill);
  background:var(--acrylic-koyu); backdrop-filter:blur(20px);
  border:1px solid var(--cizgi);
  font-size:10.5px; font-weight:700; color:var(--metin); letter-spacing:.3px;
}
.uygulama-get{
  position:absolute; right:8px; bottom:8px;
  height:28px; padding:0 14px; border-radius:var(--r-sm);
  background:var(--vurgu); color:#fff;
  font-size:12.5px; font-weight:700;
  display:flex; align-items:center;
  opacity:0; transform:translateY(6px);
  transition:.2s var(--hareket-2);
  box-shadow:var(--g2);
}
.uygulama:hover .uygulama-get{ opacity:1; transform:none }

.uygulama-bilgi{ padding:10px 4px 0 }
.uygulama-ad{ font-size:14px; font-weight:600; letter-spacing:-.1px; line-height:1.35 }
.uygulama-alt{ font-size:12px; color:var(--metin-2); margin-top:3px;
  display:flex; align-items:center; gap:5px }
.uygulama-alt .yildiz{ color:#F0A30A; font-size:11px }

/* geniş kart */
.uygulama-genis{ grid-column:span 2 }
.uygulama-genis .uygulama-gorsel{ aspect-ratio:16/9 }

/* ==========================================================================
   ÖNE ÇIKAN — büyük Store kartı
   ========================================================================== */
.one-cikan{
  display:grid; grid-template-columns:1.4fr 1fr;
  border-radius:var(--r-lg); overflow:hidden;
  background:var(--card); box-shadow:var(--g2);
  margin-bottom:36px;
  transition:.2s var(--hareket-2);
}
.one-cikan:hover{ box-shadow:var(--g5) }
.one-cikan-gorsel{ position:relative; background:var(--card-2) }
.one-cikan-gorsel img{ width:100%; height:100%; object-fit:cover; min-height:300px }
.one-cikan-bilgi{ padding:32px; display:flex; flex-direction:column; gap:12px; justify-content:center }
.one-cikan-bilgi h3{ font-size:26px; font-weight:700; letter-spacing:-.8px }
.one-cikan-bilgi p{ font-size:14px; color:var(--metin-2); line-height:1.6 }
.one-cikan-eylem{ display:flex; gap:9px; margin-top:8px; flex-wrap:wrap }

/* ==========================================================================
   KATEGORİ — Store chip
   ========================================================================== */
.kategori-serit{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:24px }
.kategori{
  display:inline-flex; align-items:center; gap:8px;
  height:34px; padding:0 15px;
  border-radius:var(--r-pill);
  background:var(--card); border:1px solid var(--cizgi);
  font-size:13px; font-weight:600; color:var(--metin);
  transition:.14s var(--hareket-2);
}
.kategori:hover{ background:var(--card-hover); box-shadow:var(--g1) }
.kategori.aktif{ background:var(--vurgu); color:#fff; border-color:transparent }

.kategori-izgara{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px;
}
.kategori-kart{
  border-radius:var(--r-md); padding:22px;
  background:var(--card); box-shadow:var(--g1);
  transition:.2s var(--hareket-2);
  position:relative; overflow:hidden;
}
.kategori-kart::before{
  content:''; position:absolute; inset:0;
  background:var(--k-renk,var(--vurgu)); opacity:0;
  transition:opacity .2s var(--hareket-2);
}
.kategori-kart:hover{ box-shadow:var(--g4); transform:translateY(-3px) }
.kategori-kart:hover::before{ opacity:.07 }
.kategori-ikon{ font-size:34px; margin-bottom:12px; position:relative }
.kategori-kart h3{ font-size:15px; font-weight:600; margin-bottom:5px; position:relative }
.kategori-kart p{ font-size:12.5px; color:var(--metin-2); position:relative; line-height:1.5 }

/* ==========================================================================
   DETAY SAYFASI
   ========================================================================== */
.detay{
  background:var(--card); border-radius:var(--r-lg);
  box-shadow:var(--g2); overflow:hidden; margin-bottom:24px;
}
.detay-gorsel{ position:relative; background:var(--card-2) }
.detay-gorsel img{ width:100%; aspect-ratio:21/9; object-fit:cover }
.detay-ust{
  position:absolute; inset:auto 0 0 0; padding:32px;
  background:linear-gradient(to top, rgba(0,0,0,.92) 6%, rgba(0,0,0,.55) 48%, transparent);
}
.detay-ust h1{
  font-size:clamp(26px,4.2vw,44px); font-weight:700;
  letter-spacing:-1.4px; color:#fff; margin-bottom:10px;
}
.detay-ust p{ color:rgba(255,255,255,.88); font-size:14.5px; max-width:64ch }
.detay-eylem{ display:flex; gap:9px; margin-top:18px; flex-wrap:wrap }
.detay-eylem .btn-kahraman{
  background:#fff; color:#1A1A1A; border-color:transparent;
}
.detay-eylem .btn-kahraman:hover{ background:#EDEDED }

.detay-govde{ padding:28px }
.detay-izgara{ display:grid; grid-template-columns:1fr 320px; gap:24px; align-items:start }

.detay-panel{
  background:var(--card); border-radius:var(--r-md);
  box-shadow:var(--g1); padding:22px; margin-bottom:16px;
}
.detay-panel h3{ font-size:16px; font-weight:600; margin-bottom:14px }
.detay-panel p{ font-size:14px; color:var(--metin-2); line-height:1.65 }

.ozellik{ display:flex; flex-direction:column }
.ozellik-sira{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--cizgi); font-size:13px;
}
.ozellik-sira:last-child{ border-bottom:0 }
.ozellik-sira dt{ color:var(--metin-2) }
.ozellik-sira dd{ font-weight:600; text-align:right }

.istek-izgara{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.istek-kart{ background:var(--mica-alt); border-radius:var(--r-ctl); padding:15px }
.istek-kart h4{
  font-size:11.5px; color:var(--metin-2); margin-bottom:9px;
  text-transform:uppercase; letter-spacing:.7px; font-weight:600;
}

.ekran-gorsel{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;
}
.ekran-gorsel figure{
  border-radius:var(--r-md); overflow:hidden;
  box-shadow:var(--g1); transition:.2s var(--hareket-2);
}
.ekran-gorsel figure:hover{ box-shadow:var(--g4); transform:scale(1.02) }
.ekran-gorsel img{ width:100%; aspect-ratio:16/9; object-fit:cover }

.gunluk-kayit{
  background:var(--mica-alt); border-radius:var(--r-ctl);
  padding:15px; margin-bottom:10px;
}
.gunluk-surum{ font-weight:600; font-size:14px }
.gunluk-tarih{ font-size:12px; color:var(--metin-2); margin-left:8px }
.gunluk-degisiklik{ margin-top:9px; display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--metin-2) }
.gunluk-degisiklik li{ padding-left:16px; position:relative }
.gunluk-degisiklik li::before{ content:'›'; position:absolute; left:4px; color:var(--vurgu); font-weight:700 }

/* ==========================================================================
   ETİKET / ROZET
   ========================================================================== */
.rozet{
  display:inline-flex; align-items:center; gap:6px;
  height:24px; padding:0 10px; border-radius:var(--r-sm);
  background:var(--mica-alt); border:1px solid var(--cizgi);
  font-size:11.5px; font-weight:600; color:var(--metin-2);
}
.rozet-vurgu{ background:var(--vurgu); color:#fff; border-color:transparent }
.rozet-yesil{ background:rgba(16,124,16,.12); color:#107C10; border-color:transparent }
body.dark .rozet-yesil{ background:rgba(76,194,255,.14); color:#4CC2FF }

/* ==========================================================================
   FORM (admin)
   ========================================================================== */
.form-grup{ margin-bottom:16px }
.form-grup label{
  display:block; font-size:12.5px; font-weight:600;
  color:var(--metin-2); margin-bottom:6px;
}
.girdi{
  width:100%; padding:9px 12px;
  background:var(--mica-alt); border:1px solid var(--cizgi-2);
  border-bottom:2px solid var(--cizgi-2);
  border-radius:var(--r-ctl); font-size:13.5px;
  transition:.15s var(--hareket-2);
}
.girdi:focus{
  outline:0; background:var(--card-2);
  border-color:var(--vurgu); border-bottom-color:var(--vurgu);
  border-bottom-width:2px;
}
textarea.girdi{ min-height:100px; resize:vertical; line-height:1.55 }
select.girdi{ cursor:pointer }
.form-hata{ font-size:12px; color:#C42B1C; margin-top:5px }
body.dark .form-hata{ color:#FF99A4 }
.form-izgara{ display:grid; grid-template-columns:1fr 1fr; gap:14px }

/* ==========================================================================
   TABLO
   ========================================================================== */
.tablo-kap{
  background:var(--card); border-radius:var(--r-md);
  box-shadow:var(--g1); overflow:hidden;
}
table{ width:100%; border-collapse:collapse; font-size:13px }
thead th{
  padding:11px 15px; text-align:left; white-space:nowrap;
  font-size:11.5px; font-weight:600; color:var(--metin-2);
  background:var(--mica-alt); border-bottom:1px solid var(--cizgi);
  position:sticky; top:0;
}
tbody td{ padding:11px 15px; border-bottom:1px solid var(--cizgi) }
tbody tr{ transition:background .1s }
tbody tr:hover{ background:var(--card-hover) }
tbody tr:last-child td{ border-bottom:0 }

/* ==========================================================================
   ADMIN
   ========================================================================== */
.admin-kabuk{ display:flex; min-height:100vh }
.admin-yan{
  width:56px; flex-shrink:0; background:var(--acrylic);
  backdrop-filter:blur(40px); border-right:1px solid var(--cizgi);
  display:flex; flex-direction:column; align-items:center; padding:12px 0; gap:4px;
}
.admin-ana{ flex:1; padding:24px 30px 60px; min-width:0 }
.admin-giris{
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:var(--mica);
}
.admin-kart{
  width:100%; max-width:400px;
  background:var(--acrylic); border:1px solid var(--cizgi-2);
  border-radius:var(--r-xl); padding:40px 36px;
  box-shadow:var(--g5); backdrop-filter:blur(50px);
  text-align:center;
}
.admin-bolum{
  background:var(--card); border-radius:var(--r-md);
  box-shadow:var(--g1); padding:22px; margin-bottom:16px;
}
.admin-bolum h3{ font-size:16px; font-weight:600; margin-bottom:16px }
.admin-menu{ display:flex; gap:3px; flex-wrap:wrap; margin-bottom:20px }
.admin-menu a{
  display:flex; align-items:center; gap:9px;
  padding:8px 13px; border-radius:var(--r-ctl);
  color:var(--metin-2); font-size:13.5px; font-weight:600;
  transition:.14s var(--hareket-2);
}
.admin-menu a:hover{ background:var(--acrylic-ince); color:var(--metin) }
.admin-menu a.aktif{ background:var(--vurgu); color:#fff }

/* ==========================================================================
   ARAMA ÖNERİSİ
   ========================================================================== */
.oneri{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:120;
  background:var(--flyout); border:1px solid var(--cizgi-2);
  border-radius:var(--r-md); overflow:hidden;
  box-shadow:var(--g5); backdrop-filter:blur(50px);
  max-height:380px; overflow-y:auto;
  animation:acilir .2s var(--hareket-1) both;
}
@keyframes acilir{ from{ opacity:0; transform:translateY(-6px) } }
.oneri-oge{
  display:flex; align-items:center; gap:11px;
  padding:10px 14px; cursor:pointer; transition:background .1s;
}
.oneri-oge:hover,.oneri-oge.vurgulu{ background:var(--acrylic-ince) }
.oneri-ikon{ width:38px; height:38px; border-radius:var(--r-sm); object-fit:cover; background:var(--card); flex-shrink:0 }
.oneri-yazi{ flex:1; min-width:0 }
.oneri-yazi b{ display:block; font-size:13.5px; font-weight:600 }
.oneri-yazi small{ font-size:11.5px; color:var(--metin-2) }

/* ==========================================================================
   BİLDİRİM
   ========================================================================== */
.bildirim-kap{
  position:fixed; bottom:20px; right:20px; z-index:600;
  display:flex; flex-direction:column; gap:8px; max-width:380px;
}
.bildirim{
  padding:13px 17px; border-radius:var(--r-md);
  background:var(--flyout); border:1px solid var(--cizgi-2);
  border-left:3px solid var(--vurgu);
  box-shadow:var(--g4); backdrop-filter:blur(50px);
  font-size:13.5px;
  animation:kayGir .28s var(--hareket-1) both;
}
@keyframes kayGir{ from{ opacity:0; transform:translateX(50px) } }
.bildirim.basari{ border-left-color:#107C10 }
.bildirim.hata{ border-left-color:#C42B1C }
.bildirim.uyari{ border-left-color:#F7630C }
.bildirim.gizle{ animation:kayCik .28s var(--hareket-2) both }
@keyframes kayCik{ to{ opacity:0; transform:translateX(50px) } }

/* ==========================================================================
   BOŞ DURUM
   ========================================================================== */
.bos{
  text-align:center; padding:70px 24px;
  background:var(--card); border-radius:var(--r-lg); box-shadow:var(--g1);
}
.bos-ikon{ font-size:64px; margin-bottom:18px; opacity:.6 }
.bos h3{ font-size:19px; font-weight:600; margin-bottom:8px }
.bos p{ font-size:13.5px; color:var(--metin-2); margin-bottom:20px }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-alt{
  margin-left:68px;
  border-top:1px solid var(--cizgi);
  background:var(--acrylic-ince);
  backdrop-filter:blur(30px);
  padding:32px 32px 20px;
}
.alt-ic{
  max-width:1700px; margin:0 auto;
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:32px; padding-bottom:24px;
}
.alt-bolum h4{
  font-size:11.5px; font-weight:600; color:var(--metin-2);
  margin-bottom:12px; text-transform:uppercase; letter-spacing:.8px;
}
.alt-bolum p{ font-size:12.5px; color:var(--metin-2); line-height:1.6; max-width:40ch }
.alt-bolum a{ display:block; font-size:12.5px; color:var(--metin-2); padding:4px 0; transition:color .12s }
.alt-bolum a:hover{ color:var(--metin) }
.alt-son{
  max-width:1700px; margin:0 auto; padding-top:16px;
  border-top:1px solid var(--cizgi);
  font-size:12px; color:var(--metin-3); display:flex;
  justify-content:space-between; gap:12px; flex-wrap:wrap;
}

/* ==========================================================================
   YARDIMCI
   ========================================================================== */
.gecikmeli{ opacity:0; transform:translateY(16px); transition:opacity .5s var(--hareket-1), transform .5s var(--hareket-1) }
.gecikmeli.gorunur{ opacity:1; transform:none }
.iskelet{
  border-radius:var(--r-md); overflow:hidden; aspect-ratio:16/10;
  background:var(--card); box-shadow:var(--g1); position:relative;
}
.iskelet::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 20%,var(--acrylic-ince) 50%,transparent 80%);
  animation:kaydir 1.4s infinite;
}
@keyframes kaydir{ to{ transform:translateX(100%) } }
.gorsel-gizli{ opacity:0; transition:opacity .35s var(--hareket-2) }
.gorsel-gizli.yuklendi{ opacity:1 }
.vurgulu{ background:var(--acrylic-ince) !important }
.kapatildi{ display:none }

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

/* ==========================================================================
/* ==========================================================================
   SOL MENÜ — tek temel blok (dar ↔ geniş)
   ========================================================================== */
.navray{
  position:fixed; left:0; top:0; bottom:0;
  width:60px; overflow:hidden;
  background:var(--acrylic);
  backdrop-filter:blur(40px) saturate(160%);
  -webkit-backdrop-filter:blur(40px) saturate(160%);
  border-right:1px solid var(--cizgi);
  display:flex; flex-direction:column;
  z-index:100;
  transition:width .22s var(--hareket-1);
}
.navray.acik{ width:220px; box-shadow:var(--g4) }

/* --- logo --- */
.navray .ray-logo{
  height:54px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  padding:0; border-bottom:1px solid var(--cizgi);
}
.navray .ray-logo img{ width:28px; height:28px; border-radius:7px; flex-shrink:0 }
.navray .ray-logo span{ display:none }
.navray.acik .ray-logo{ justify-content:flex-start; padding-left:16px; gap:10px }
.navray.acik .ray-logo span{
  display:block; font-size:15px; font-weight:700; letter-spacing:-.3px;
  color:var(--metin); white-space:nowrap;
}

/* --- aç/kapat düğmesi --- */
.ray-genislet{
  width:34px; height:34px; flex-shrink:0; margin:8px auto;
  border-radius:var(--r-ctl);
  display:grid; place-items:center;
  background:var(--acrylic-ince); color:var(--metin-2);
  font-size:16px; line-height:1;
  transition:.14s var(--hareket-2);
}
.ray-genislet:hover{ background:var(--vurgu); color:#fff }
.navray.acik .ray-genislet{ margin-left:auto; margin-right:10px }

/* --- menü listesi --- */
.ray-menu{
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:2px 8px 10px;
  display:flex; flex-direction:column; gap:2px;
}
.ray-ayrac{ height:1px; background:var(--cizgi); margin:8px 6px; flex-shrink:0 }
.ray-spacer{ flex:1; min-height:8px }

/* --- bağlantı --- */
.ray-link{
  display:flex; align-items:center;
  height:42px; width:100%;
  border-radius:var(--r-ctl);
  color:var(--metin); font-size:13.5px; font-weight:500;
  flex-shrink:0; position:relative;
  transition:.14s var(--hareket-2);
}
.ray-link .ray-ikon{
  width:44px; flex-shrink:0; text-align:center;
  font-size:19px; line-height:1;
  filter:grayscale(1) opacity(.7);
  transition:.14s var(--hareket-2);
}
.ray-link .ray-yazi{
  display:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ray-link:hover{ background:var(--acrylic-ince) }
.ray-link:hover .ray-ikon{ filter:none }

/* geniş mod */
.navray.acik .ray-link{ justify-content:flex-start; padding-right:12px }
.navray.acik .ray-link .ray-yazi{ display:block }

/* seçili */
.ray-link.active{ background:var(--vurgu); color:#fff; font-weight:600 }
.ray-link.active .ray-ikon{ filter:none; font-size:20px }

/* dar mod ipucu */
.ray-link::after{
  content:attr(data-ad);
  position:absolute; left:calc(100% + 12px); top:50%;
  transform:translateY(-50%) translateX(-6px);
  padding:6px 12px; border-radius:var(--r-ctl);
  background:var(--flyout); border:1px solid var(--cizgi-2);
  box-shadow:var(--g4); backdrop-filter:blur(30px);
  color:var(--metin); font-size:12.5px; font-weight:600; white-space:nowrap;
  opacity:0; pointer-events:none; z-index:300;
  transition:.15s var(--hareket-2);
}
.ray-link:hover::after{ opacity:1; transform:translateY(-50%) translateX(0) }
.navray.acik .ray-link::after{ display:none }

/* --- içerik kaydı --- */
.ustcubuk{ left:60px; transition:left .22s var(--hareket-1) }
.icerik{ margin-left:60px; transition:margin-left .22s var(--hareket-1) }
.site-alt{ margin-left:60px; transition:margin-left .22s var(--hareket-1) }

@media (max-width:960px){
  .navray{ transform:translateX(-100%); width:240px !important }
  .navray.kaydir{ transform:none; box-shadow:var(--g5) }
  .navray .ray-logo{ justify-content:flex-start; padding-left:16px; gap:10px }
  .navray .ray-logo span{ display:block; font-size:15px; font-weight:700 }
  .ray-genislet{ display:none }
  .navray .ray-link{ justify-content:flex-start; padding-right:12px }
  .navray .ray-link .ray-yazi{ display:block }
  .ray-link::after{ display:none }
  .ustcubuk{ left:0 }
  .icerik{ margin-left:0 }
  .site-alt{ margin-left:0 }
  .yemek-btn{ display:grid; place-items:center }
}
@media (max-width:680px){
  .ustcubuk{ height:52px; padding:0 12px }
  .icerik{ padding:70px 14px 44px }
  .site-alt{ padding:22px 14px 16px }
}

/* ==========================================================================
   HUB — site kartları
   ========================================================================== */
.hub-cubuk{ left:0 !important }
.hub-icerik{ margin-left:0 !important; padding-top:84px; max-width:1180px; margin-inline:auto }

.hub-hero{
  min-height:auto; padding:48px 44px; margin-bottom:36px;
}
.hub-hero h1{ font-size:clamp(28px,4.2vw,46px); margin-bottom:8px }
.hub-hero p{ margin-bottom:0 }

.hub-izgara{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px;
}

.hub-kart{
  display:flex; align-items:center; gap:16px;
  background:var(--card); border:1px solid var(--cizgi);
  border-radius:var(--r-lg); padding:20px;
  position:relative; overflow:hidden;
  box-shadow:var(--g1);
  transition:.2s var(--hareket-1);
  animation:kutuGir .38s var(--hareket-1) both;
}
.hub-kart::before{
  content:''; position:absolute; inset:0;
  background:var(--r); opacity:0; transition:opacity .2s var(--hareket-2);
}
.hub-kart::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--r); opacity:.85;
}
.hub-kart:hover{
  transform:translateY(-4px);
  box-shadow:var(--g4);
  border-color:var(--r);
}
.hub-kart:hover::before{ opacity:.06 }

.hub-ikon{
  width:54px; height:54px; flex-shrink:0;
  border-radius:13px;
  display:grid; place-items:center; font-size:27px;
  background:var(--r); color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  position:relative;
}

.hub-yazi{ flex:1; min-width:0; position:relative }
.hub-ad{ font-size:16.5px; font-weight:700; letter-spacing:-.4px; margin-bottom:3px }
.hub-aciklama{
  font-size:12.8px; color:var(--metin-2); line-height:1.5; margin-bottom:9px;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.hub-alt{ display:flex; align-items:center; gap:9px; flex-wrap:wrap }
.hub-adres{
  font-size:11px; color:var(--metin-3); font-family:ui-monospace,Menlo,monospace;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:190px;
}

.hub-btn{
  flex-shrink:0; position:relative;
  display:inline-flex; align-items:center; gap:6px;
  height:34px; padding:0 15px; border-radius:var(--r-ctl);
  background:var(--r); color:#fff;
  font-size:13px; font-weight:600;
  box-shadow:var(--g2);
  transition:.18s var(--hareket-2);
}
.hub-kart:hover .hub-btn{ filter:brightness(1.12) }
.hub-ok{ transition:transform .18s var(--hareket-1) }
.hub-kart:hover .hub-ok{ transform:translateX(3px) }

@media (max-width:720px){
  .hub-icerik{ padding:76px 16px 44px }
  .hub-hero{ padding:32px 22px; border-radius:var(--r-lg) }
  .hub-izgara{ grid-template-columns:1fr; gap:13px }
  .hub-kart{ padding:16px; gap:13px }
  .hub-ikon{ width:46px; height:46px; font-size:23px }
  .hub-btn{ height:32px; padding:0 13px; font-size:12.5px }
  .hub-adres{ max-width:130px }
}
@media (max-width:420px){
  .hub-kart{ flex-wrap:wrap }
  .hub-btn{ width:100%; justify-content:center; margin-top:4px }
}

@keyframes kutuGir{ from{ opacity:0; transform:translateY(14px) } }