@charset "UTF-8";

:root{
  --zemin:#faf4fb;
  --zemin-2:#f1e5f3;
  --acik:#ecd2f0;
  --koyu:#2b1c33;
  --ana:#77378b;
  --buton:#ff86d7;
  --buton-hover:#ffa9e3;
  --buton-yazi:#2b1c33;
  --cizgi:#e2cfe6;
  --yazi:#1d1224;
  --yazi-2:#563a62;
  --yazi-3:#664a72;
  --koyu-yazi:#faeefc;
  --koyu-yazi-2:#d6bfdc;
  --koyu-cizgi:#4a3556;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  padding-bottom:0;
  background:var(--zemin);
  color:var(--yazi);
  font-family:Candara,Calibri,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.75;
}

h1,h2,h3{
  font-family:inherit;
  font-weight:700;
  letter-spacing:normal;
  line-height:1.25;
  color:var(--koyu);
  overflow-wrap:anywhere;
}

p{margin:0 0 14px}
a{color:var(--ana)}
img,svg,video{max-width:100%}
section[id],#liste{scroll-margin-top:80px}

:focus-visible{outline:2px solid var(--ana);outline-offset:2px}
.ust :focus-visible,.bant :focus-visible,.alt :focus-visible,.alternatif :focus-visible,.popup :focus-visible{outline-color:var(--buton)}

.kap{max-width:1120px;margin:0 auto;padding:0 20px}
.metin-kap{max-width:760px;margin:0 auto;padding:0 20px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 20px;
  background:var(--buton);
  color:var(--buton-yazi);
  border:0;
  border-radius:8px;
  font-family:inherit;
  font-size:16px;
  font-weight:800;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
}
.btn:hover{background:var(--buton-hover)}

/* ---------- BAŞLIK ---------- */
.ust{
  position:sticky;
  top:0;
  z-index:50;
  height:64px;
  background:var(--koyu);
  border-bottom:1px solid var(--koyu-cizgi);
}
.ust-ic{
  box-sizing:border-box;
  height:64px;
  padding:0 max(20px,calc((100% - 1120px) / 2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.logo{
  color:var(--koyu-yazi);
  font-size:26px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.logo span{color:var(--buton)}

.menu-yatay{display:none;align-items:center;gap:22px;min-width:0;white-space:nowrap}
.menu-yatay a{
  display:flex;
  align-items:center;
  gap:6px;
  height:64px;
  color:var(--koyu-yazi);
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  box-shadow:inset 0 -3px 0 transparent;
}
.menu-yatay a:hover{box-shadow:inset 0 -3px 0 var(--koyu-yazi-2)}
.menu-yatay a.etkin{box-shadow:inset 0 -3px 0 var(--buton)}
.mno{color:var(--buton);font-size:13px;font-weight:700}

.menu{display:block;position:static}
.menu summary{
  height:44px;
  display:flex;
  align-items:center;
  padding:0 16px;
  border:2px solid var(--buton);
  border-radius:8px;
  background:transparent;
  color:var(--koyu-yazi);
  font-weight:700;
  list-style:none;
  cursor:pointer;
}
.menu summary::-webkit-details-marker{display:none}
.menu summary::marker{content:""}
.menu-panel{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:var(--koyu);
  border-top:1px solid var(--koyu-cizgi);
  max-height:calc(100dvh - 64px);
  overflow:auto;
  z-index:50;
}
.menu-panel a{
  display:flex;
  align-items:center;
  gap:8px;
  height:48px;
  padding:0 20px;
  border-bottom:1px solid var(--koyu-cizgi);
  color:var(--koyu-yazi);
  font-size:16px;
  text-decoration:none;
}
.menu-panel a.etkin{box-shadow:inset 3px 0 0 var(--buton)}

/* ---------- MANŞET ---------- */
.manset{
  background:var(--zemin);
  padding:40px 0 28px;
  border-bottom:4px solid var(--ana);
}
.manset-cizgisiz{border-bottom:0;padding-bottom:24px}
.ust-yazi{
  margin:0 0 6px;
  color:var(--ana);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.manset h1{
  margin:0 0 12px;
  max-width:760px;
  font-size:clamp(1.6rem,4.2vw,2.4rem);
  color:var(--koyu);
}
.manset-aciklama{
  max-width:640px;
  margin:0 0 10px;
  color:var(--yazi-2);
  font-size:17px;
}
.guncelleme{margin:0;color:var(--yazi-3);font-size:13px}
.kmb{font-size:13px;color:var(--yazi-2);margin:0 0 14px}
.kmb a{color:var(--yazi-2);text-decoration:none}
.kmb a:hover{text-decoration:underline}
.kmb span{margin:0 6px}

/* ---------- BETZULA BANDI ---------- */
.bant{
  position:relative;
  z-index:2;
  background:var(--ana);
  padding:20px 0;
  border-bottom:1px solid var(--koyu-cizgi);
}
.bant-ic{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 190px;
  gap:24px;
  align-items:center;
}
.editor{
  display:inline-block;
  background:var(--buton);
  color:var(--buton-yazi);
  border-radius:6px;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  padding:6px 12px;
}
.bant-baslik{color:var(--koyu-yazi);font-size:15px;font-weight:700;margin:8px 0 0}
.bant-bonus{color:var(--koyu-yazi);font-size:1.25rem;font-weight:700;margin:0;overflow-wrap:anywhere}
.bant-sag .btn{width:100%}

/* ---------- SAYAÇ ---------- */
.sayac{background:var(--zemin-2);padding:8px 0}
.sayac-ic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.sayac-oge{display:flex;align-items:center;gap:12px;padding:14px 20px;text-align:left;min-width:0}
.sayac-oge + .sayac-oge{border-left:1px solid var(--cizgi)}
.sayac-sayi{font-size:2rem;font-weight:700;color:var(--ana);line-height:1}
.sayac-etiket{font-size:14px;color:var(--yazi-2);white-space:normal;overflow-wrap:anywhere}

/* ---------- GİRİŞ ---------- */
.giris-kap{padding:28px 0 8px}
.giris-metin{max-width:820px;margin:0;color:var(--yazi)}

/* ---------- PANO LİSTESİ ---------- */
.liste-alan{background:var(--zemin);padding:24px 0 32px}
.liste-kap .bolum-baslik{margin-top:0}
.pano-listesi{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.pano{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;
  background:#fff;
  border:1px solid var(--cizgi);
  border-radius:10px;
  overflow:hidden;
}
.pano:hover{border-color:var(--ana)}
.pano-govde{padding:20px;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.pano-sol{min-width:0}
.pano-bas{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:start;margin-bottom:10px}
.sira{font-size:40px;font-weight:800;line-height:1;color:var(--ana)}
.pano-ad{min-width:0}
.pano-marka{
  margin:0;
  font-size:22px;
  font-weight:800;
  color:var(--koyu);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.rozetler{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.rozet{background:var(--acik);color:var(--koyu);border-radius:6px;font-size:13px;font-weight:700;padding:3px 8px}
.pano-kisa{margin:0;font-size:1.15rem;font-weight:700;color:var(--ana);overflow-wrap:anywhere}
.pano-detay{margin:0;font-size:14px;color:var(--yazi-2);overflow-wrap:anywhere}
.pano-aciklama{margin:0;font-size:14px;color:var(--yazi-2);overflow-wrap:anywhere}
.pano-not{margin:0;font-size:14px;font-weight:700;color:var(--koyu);background:var(--acik);border-radius:6px;padding:6px 8px}
.pano-buton{margin-top:4px}
.pano-buton .btn{width:100%}

.cevrim-seridi{
  background:var(--zemin-2);
  border-top:1px solid var(--cizgi);
  padding:12px 20px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  min-width:0;
}
.cevrim-sol{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;min-width:0}
.cevrim-etiket{font-size:13px;font-weight:700;color:var(--ana);text-transform:uppercase;letter-spacing:.06em}
.cevrim-deger{font-size:14px;color:var(--yazi);overflow-wrap:anywhere}
.incele{color:var(--ana);font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap}
.incele:hover{text-decoration:underline}

.pano-betzula{grid-column:1 / -1;background:var(--koyu);border-color:var(--koyu-cizgi)}
.pano-betzula:hover{border-color:var(--koyu-cizgi)}
.pano-betzula .sira{color:var(--buton)}
.pano-betzula .pano-marka{color:var(--koyu-yazi)}
.pano-betzula .pano-kisa{color:var(--buton)}
.pano-betzula .pano-detay,.pano-betzula .pano-aciklama{color:var(--koyu-yazi-2)}
.pano-betzula .cevrim-seridi{background:var(--koyu-cizgi);border-top:0}
.pano-betzula .cevrim-etiket{color:var(--koyu-yazi-2)}
.pano-betzula .cevrim-deger{color:var(--koyu-yazi)}
.pano-betzula .incele{color:var(--koyu-yazi);text-decoration:underline}
.hosgeldin-baslik{margin-top:36px}
.hosgeldin-giris{max-width:820px;margin:0 0 16px;color:var(--yazi-2);font-size:15px}

/* ---------- İÇERİK BÖLÜMLERİ ---------- */
.bolum{padding:40px 0}
.bolum-beyaz{background:#fff}
.bolum-zemin{background:var(--zemin)}
.bolum-zemin2{background:var(--zemin-2)}
.bolum-baslik{
  margin:0 0 18px;
  padding-left:14px;
  border-left:6px solid var(--buton);
  font-size:1.75rem;
  color:var(--koyu);
}
.metin-kap p{margin:0 0 14px;overflow-wrap:anywhere}
.metin-kap ul,.metin-kap ol{padding-left:22px;margin:0 0 14px}
.metin-kap li{margin-bottom:6px}
.metin-kap h3{font-size:1.25rem;color:var(--ana);margin:20px 0 10px}
.metin-kap strong{color:var(--koyu)}
.ornek-kutu{background:#fff;border:1px solid var(--cizgi);border-radius:10px;padding:16px 18px;margin:0 0 14px}
.ornek-kutu p{margin:0 0 8px}
.ornek-kutu p:last-child{margin:0}

.tablo-kap{overflow-x:auto;background:#fff;border:1px solid var(--cizgi);border-radius:10px;margin:0 0 12px}
table.karsilastirma{width:100%;min-width:640px;border-collapse:collapse;background:#fff}
.karsilastirma th{background:var(--ana);color:var(--koyu-yazi);font-weight:700;text-align:left;padding:12px 14px;font-size:15px}
.karsilastirma td{border-top:1px solid var(--cizgi);padding:12px 14px;font-size:15px;vertical-align:top;overflow-wrap:anywhere}
.karsilastirma tbody tr:nth-child(even){background:var(--zemin-2)}
.tablo-not{display:block;margin-top:4px;font-size:13px;font-weight:700;color:var(--ana)}
.tablo-dipnot{font-size:14px;color:var(--yazi-2)}

.sss{border-top:1px solid var(--cizgi)}
.sss details{border-bottom:1px solid var(--cizgi)}
.sss summary{
  list-style:none;
  cursor:pointer;
  min-height:56px;
  padding:12px 0;
  display:flex;
  align-items:center;
  gap:0;
  font-size:17px;
  font-weight:700;
  color:var(--koyu);
}
.sss summary::-webkit-details-marker{display:none}
.sss summary::marker{content:""}
.sss summary::before{content:"+";flex:0 0 24px;width:24px;color:var(--ana);font-weight:700}
.sss details[open] > summary::before{content:"−"}
.sss summary:hover{color:var(--ana)}
.sss-cevap{padding:0 0 16px 24px;color:var(--yazi)}

.ilgili-kutu{background:#fff;border:1px solid var(--cizgi);border-radius:10px;padding:20px;margin:0 0 20px}
.ilgili-kutu h2{margin:0 0 12px;font-size:1.25rem;color:var(--koyu)}
.ilgili-kutu ul{margin:0;padding-left:20px}
.ilgili-kutu li{margin-bottom:6px}
.ilgili-kutu a{color:var(--ana);font-weight:600}
.sorumlu-not{font-size:14px;color:var(--yazi-2);margin:0}

/* ---------- /site SAYFASI ---------- */
.site-kap{padding-top:28px;padding-bottom:40px}
.site-kisa-bonus{margin:10px 0 0;font-size:1.15rem;font-weight:700;color:var(--ana)}
.site-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.site-icerik{min-width:0;max-width:740px}
.site-tek{max-width:760px}
.site-giris{font-size:17px;color:var(--yazi)}
.site-ozet{min-width:0}
.ozet-kart{background:#fff;border:1px solid var(--cizgi);border-top:4px solid var(--ana);border-radius:10px;padding:20px}
.ozet-baslik{margin:0 0 12px;font-size:18px;font-weight:700;color:var(--koyu)}
.ozet-liste{margin:0}
.ozet-satir{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;padding:10px 0}
.ozet-satir + .ozet-satir{border-top:1px solid var(--cizgi)}
.ozet-satir dt{margin:0;font-size:13px;font-weight:700;color:var(--ana);text-transform:uppercase}
.ozet-satir dd{margin:0;font-size:15px;color:var(--yazi);overflow-wrap:anywhere}
.alternatif{margin-top:12px;background:var(--koyu);border:1px solid var(--koyu-cizgi);border-radius:10px;padding:16px 20px}
.alternatif-baslik{margin:0 0 10px;color:var(--koyu-yazi);font-size:16px;font-weight:700}
.alternatif .btn{width:100%}

/* ---------- KURUMSAL ---------- */
.kurumsal-kap{padding-top:32px;padding-bottom:48px}
.kurumsal-metin{max-width:760px}
.kurumsal-metin .ilgili-kutu{margin-top:28px}

/* ---------- FOOTER ---------- */
.alt{background:var(--koyu);color:var(--koyu-yazi);padding:40px 0 120px}
.alt-ic{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:32px}
.alt-logo{margin:0 0 10px;font-size:26px;font-weight:700;color:var(--koyu-yazi)}
.alt-logo span{color:var(--buton)}
.alt-tanim{margin:0;max-width:360px;color:var(--koyu-yazi-2);font-size:14px}
.alt-sutun{min-width:0}
.alt-baslik{margin:0 0 12px;font-size:13px;font-weight:700;color:var(--koyu-yazi-2);text-transform:uppercase;letter-spacing:.08em}
.alt-sutun a{display:flex;align-items:center;min-height:40px;padding:8px 0;color:var(--koyu-yazi);font-size:15px;text-decoration:none}
.alt-sutun a:hover{color:var(--buton)}
.alt-tg-baslik{margin-top:18px}
.alt-sutun .alt-tg{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  height:44px;
  padding:10px 20px;
  background:var(--buton);
  color:var(--buton-yazi);
  border-radius:8px;
  font-weight:700;
  text-decoration:none;
}
.alt-sutun .alt-tg:hover{background:var(--buton-hover);color:var(--buton-yazi)}
.alt-18{margin:10px 0 0;font-size:14px;color:var(--koyu-yazi-2)}
.alt-alt{border-top:1px solid var(--koyu-cizgi);margin-top:28px;padding:16px 0 0;font-size:13px;color:var(--koyu-yazi-2);text-align:left}

.tg-yuvarlak{
  position:fixed;
  right:14px;
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:60;
  width:46px;
  height:46px;
  border-radius:50%;
  background:#229ED9;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/* ---------- POPUP ---------- */
.popup-perde{
  display:none;
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(43,28,51,.6);
  align-items:center;
  justify-content:center;
  padding:12px;
  overflow:auto;
}
.popup-perde.acik{display:flex}
.popup{
  position:relative;
  width:100%;
  max-width:min(420px,calc(100% - 24px));
  max-height:calc(100dvh - 24px);
  overflow:auto;
  background:#fff;
  border:1px solid var(--cizgi);
  border-top:4px solid var(--ana);
  border-radius:10px;
  padding:64px 16px 16px;
  animation:popupAc .3s ease;
}
@keyframes popupAc{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.popup{animation:none}}
.popup-kapat{
  position:absolute;
  right:12px;
  top:12px;
  width:44px;
  height:44px;
  border:0;
  border-radius:8px;
  background:var(--acik);
  color:var(--koyu);
  font-size:24px;
  line-height:1;
  cursor:pointer;
  z-index:2;
}
.bz-video{display:block;margin:4px auto 14px;border-radius:10px;overflow:hidden;background:var(--koyu);line-height:0}
.bz-video video{display:block;width:100%;height:auto;aspect-ratio:1200/740;object-fit:cover;pointer-events:none}
.pop-baslik{margin:0 0 6px;font-size:18px;font-weight:700;color:var(--koyu)}
.pop-bonus{margin:0 0 4px;font-size:1.15rem;font-weight:700;color:var(--ana)}
.pop-cumle{margin:0 0 14px;font-size:14px;color:var(--yazi-2)}
.popup-btn{width:100%;min-height:48px}
body.popup-acik{overflow:hidden}

/* ---------- ADMIN ---------- */
.admin{max-width:1000px;margin:0 auto;padding:24px 16px 60px}
.admin-ust{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.admin-bolum{background:#fff;border:1px solid var(--cizgi);border-radius:10px;padding:20px;margin-bottom:20px}
.admin-bolum h2{margin-top:0;font-size:1.25rem}
.admin-form{display:flex;flex-direction:column;gap:10px}
.admin-form label{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600;color:var(--yazi-2)}
.admin-form input,.admin-form textarea{
  width:100%;
  font-family:inherit;
  font-size:15px;
  padding:10px;
  border:1px solid var(--cizgi);
  border-radius:8px;
  background:#fff;
  color:var(--yazi);
}
.admin-form fieldset{border:1px solid var(--cizgi);border-radius:8px;padding:8px 12px;margin:0}
.admin-form legend{font-size:14px;font-weight:700;padding:0 4px}
.admin-inline{display:inline-flex;flex-direction:row;align-items:center;gap:6px;margin-right:12px;font-weight:600}
.admin-liste{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.admin-marka{border:1px solid var(--cizgi);border-radius:8px;padding:10px 14px}
.admin-marka summary{cursor:pointer;padding:6px 0}
.admin-slug{color:var(--yazi-2);font-size:14px}
.admin-islemler{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.btn.admin-kucuk{min-height:38px;height:38px;padding:0 14px;font-size:14px}
.admin-tehlike{background:#ffd3e6}
.admin-hata{background:#ffe3ef;border:1px solid #f0a8c8;border-radius:8px;padding:10px 12px;color:#70153f}
.admin-basarili{background:#e7f6ea;border:1px solid #a9d9b4;border-radius:8px;padding:10px 12px;color:#1d5230}
.admin-ipucu{display:block;font-size:13px;color:var(--yazi-2)}
.admin-giris{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--zemin)}
.admin-kutu{width:100%;max-width:380px;background:#fff;border:1px solid var(--cizgi);border-top:4px solid var(--ana);border-radius:10px;padding:24px}
.admin-kutu h1{margin:0 0 6px;font-size:1.4rem}
.admin-aciklama{font-size:14px;color:var(--yazi-2)}
.admin-kutu form{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.admin-kutu label{font-size:14px;font-weight:600;color:var(--yazi-2)}
.admin-kutu input{width:100%;font-family:inherit;font-size:16px;padding:10px;border:1px solid var(--cizgi);border-radius:8px}
.admin-btn{width:100%;margin-top:6px}

/* ---------- KIRILMA NOKTALARI ---------- */
@media (min-width:1024px){
  .menu-yatay{display:flex}
  .menu{display:none}
}

@media (max-width:1100px){
  .menu-yatay a{font-size:14px}
  .menu-yatay{gap:14px}
  .ust-ic{padding-left:20px;padding-right:20px}
}

@media (max-width:991px){
  .site-icerik{max-width:none}
}

@media (min-width:992px){
  .site-grid{grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
  .site-ozet{grid-column:2;grid-row:1;position:sticky;top:80px;align-self:start;max-height:calc(100dvh - 96px);overflow:auto}
  .site-icerik{grid-column:1;grid-row:1}
}

@media (min-width:768px){
  .pano-betzula .pano-govde{grid-template-columns:minmax(0,1fr) 220px;gap:24px;align-items:center}
  .pano-betzula .pano-buton{display:flex;align-items:center}
  .pano-betzula .pano-buton .btn{width:100%}
}

@media (max-width:768px){
  .bolum{padding:28px 0}
  .bolum-baslik{font-size:1.45rem}
  .manset{padding:24px 0 20px}
  .bant-ic{grid-template-columns:minmax(0,1fr);gap:10px}
  .bant-sag .btn{width:100%}
  .pano-listesi{grid-template-columns:minmax(0,1fr)}
  .alt-ic{grid-template-columns:minmax(0,1fr);gap:24px}
  .sayac-ic{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sayac-oge + .sayac-oge{border-left:0}
  .sayac-oge:nth-child(n+3){border-top:1px solid var(--cizgi)}
  .sayac-oge{padding:12px 16px}
  .site-ozet{position:static;max-height:none;overflow:visible}
}

@media (max-width:480px){
  .kap,.metin-kap{padding-left:16px;padding-right:16px}
  .ust-ic{padding-left:16px;padding-right:16px}
  .logo{font-size:22px}
  .manset-aciklama{display:none}
  .manset h1{font-size:1.55rem}
  .pano-govde{padding:16px}
  .cevrim-seridi{padding:12px 16px}
  .sayac-oge{padding:12px 12px}
  .alt{padding-bottom:120px}
}