/* MilenyumCraft Web AFK — yerleşim, sayfalar ve mobil.
 * Renk, yazı ve bileşen dili launcher ile aynı (temel.css + bilesenler.css). Satır içi stil yok (CSP):
 * dinamik değerler CSS özel değişkenleriyle (--oran, --renk …) verilir.
 * Kırılımlar: ≤ 960 px tablet/telefon (yan menü gizlenir, alt menü gelir), ≤ 560 px dar telefon.
 */

:root {
  --ust-h: 68px;
  --alt-h: 64px;
  --icerik-max: 1240px;
  --guvenli-alt: env(safe-area-inset-bottom, 0px);
  --guvenli-ust: env(safe-area-inset-top, 0px);
}

body { overflow-x: hidden; }
a { text-decoration: none; }
.genis { width: 100%; }
.satir { display: flex; align-items: center; gap: 10px; }
.satir--sarar { flex-wrap: wrap; }
.satir--ara { justify-content: space-between; }
.sutun { display: flex; flex-direction: column; gap: 12px; }
.bosluk { flex: 1; }
.kalin { font-weight: 800; }
.altin-yazi { color: var(--altin); }
.iyi-yazi { color: var(--iyi); }
.hata-yazi { color: var(--hata); }
.dikkat-yazi { color: var(--dikkat); }
.ortala { text-align: center; }
.kirp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ================================================================== */
/* uygulama kabuğu                                                     */
/* ================================================================== */
.kabuk {
  display: grid;
  grid-template-columns: var(--kenar-g) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}
.yan {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  gap: 18px;
  padding: 18px 14px;
  background: var(--panel);
  border-right: 1px solid #1f2228;
}
.yan__marka { display: flex; align-items: center; gap: 10px; padding: 4px 6px 8px; }
.yan__marka img { width: 40px; height: 40px; border-radius: 10px; }
.yan__marka-yazi { display: flex; flex-direction: column; line-height: 1.1; }
.yan__marka-yazi b { font-weight: 900; font-size: 15px; letter-spacing: .3px; }
.yan__marka-yazi span { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--altin); text-transform: uppercase; }
.yan__menu { display: flex; flex-direction: column; gap: 4px; }
.yan__baslik { padding: 10px 12px 4px; }
.yan__oge {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 12px;
  border-radius: 12px;
  color: var(--soluk);
  font-weight: 700;
  border: 1px solid transparent;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.yan__oge:hover { color: var(--yazi); background: var(--yuzey2); }
.yan__oge[aria-current="page"] {
  color: var(--yazi);
  background: var(--kart);
  border-color: var(--kart-kenar);
  box-shadow: 0 3px 0 var(--kart-derinlik);
}
.yan__oge[aria-current="page"]::before {
  content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--altin);
}
.yan__oge[aria-current="page"] .simge { color: var(--altin); }
.yan__oge .rozet { margin-left: auto; }
.yan__alt { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.yan__kisi {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 14px;
  background: var(--kart); border: 1px solid var(--kart-kenar);
}
.yan__kisi .kafa { --boy: 36px; }

.ana { display: flex; flex-direction: column; min-width: 0; }
.ust {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  height: var(--ust-h);
  padding: 0 28px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #1a1d23;
}
.ust__baslik { font-size: 20px; font-weight: 900; letter-spacing: .3px; }
.ust__marka { display: none; align-items: center; gap: 8px; }
.ust__marka img { width: 34px; height: 34px; border-radius: 9px; }
.ust__sag { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.kredi-cip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 6px 0 12px;
  border-radius: 12px;
  background: var(--kart); border: 1px solid var(--kart-kenar);
  box-shadow: 0 3px 0 var(--kart-derinlik);
  font-weight: 800;
}
.kredi-cip .simge { color: var(--altin); }
.kredi-cip__yukle {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--altin); color: var(--altin-yazi);
  box-shadow: inset 0 2px 0 var(--altin-parlak), 0 2px 0 var(--altin-derinlik);
}
.kredi-cip__yukle .simge { color: inherit; width: 16px; height: 16px; }
.motor-uyari { display: none; }
.motor-uyari.acik { display: inline-flex; }

.sayfa {
  width: 100%;
  max-width: var(--icerik-max);
  margin: 0 auto;
  padding: 26px 28px 60px;
  display: flex; flex-direction: column; gap: 22px;
}
.sayfa-baslik { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.sayfa-baslik h1 { font-size: 30px; }
.sayfa-baslik p { color: var(--soluk); margin-top: 6px; max-width: 70ch; }
.sayfa-baslik__sag { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

.izgara { display: grid; gap: 20px; }
.izgara--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.izgara--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.izgara--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.izgara--pano { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }

/* alt menü (telefon) */
.alt-menu {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--alt-h) + var(--guvenli-alt));
  padding: 6px 8px var(--guvenli-alt);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid #23262f;
  grid-template-columns: repeat(5, 1fr);
}
.alt-menu__oge {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 12px;
  color: var(--soluk);
  font-size: 11px; font-weight: 800; letter-spacing: .3px;
  min-height: 48px;
}
.alt-menu__oge .simge { width: 22px; height: 22px; }
.alt-menu__oge[aria-current="page"] { color: var(--altin); }
.alt-menu__oge[aria-current="page"] .simge { filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--altin) 55%, transparent)); }

/* ================================================================== */
/* sayfa geçişi ve yükleme                                              */
/* ================================================================== */
.sayfa-gir { animation: sayfa-gir .28s var(--yay) both; }
@keyframes sayfa-gir { from { opacity: 0; translate: 0 8px; } }
.yukleniyor { display: grid; place-items: center; min-height: 50vh; color: var(--soluk); gap: 12px; }
.yukleniyor .yukleyici { width: 30px; height: 30px; color: var(--altin); }

/* ================================================================== */
/* abonelik kartı                                                      */
/* ================================================================== */
.abo {
  overflow: hidden;
  padding: 22px;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--altin) 16%, transparent) 0%, transparent 55%),
    var(--kart);
}
.abo--bitmis { background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--hata) 14%, transparent) 0%, transparent 55%), var(--kart); }
.abo__ust { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.abo__sayac { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin: 18px 0 14px; }
.abo__birim { display: flex; flex-direction: column; align-items: flex-start; }
.abo__birim b { font-size: 46px; font-weight: 900; line-height: 1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.abo__birim span { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--soluk); margin-top: 6px; }
.abo__cubuk { height: 12px; border-radius: 8px; }
.abo__bilgi { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; color: var(--soluk); font-size: var(--y-s); }
.abo__bilgi b { color: var(--yazi); }
.abo__eylem { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
.abo__oto { display: flex; align-items: center; gap: 10px; margin-left: auto; color: var(--soluk); font-weight: 700; font-size: var(--y-s); }
.fiyat { display: flex; align-items: baseline; gap: 8px; }
.fiyat b { font-size: 40px; font-weight: 900; color: var(--altin); line-height: 1; }
.fiyat span { color: var(--soluk); font-weight: 700; }

/* ================================================================== */
/* bot kartı                                                           */
/* ================================================================== */
.botlar-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bot-kart { display: flex; flex-direction: column; gap: 16px; padding: 18px; }
.bot-kart__ust { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bot-kart__ad { font-size: 19px; font-weight: 900; }
.bot-kart__alt { color: var(--soluk); font-size: var(--y-s); margin-top: 4px; flex-wrap: wrap; row-gap: 2px; }
.kimlik { min-width: 0; flex: 0 1 auto; }
.bot-kart__eylem { display: flex; gap: 10px; flex-wrap: wrap; }
.bot-kart__eylem .d3 { flex: 1 1 auto; }
.bot-kart--bos {
  display: grid; place-items: center; text-align: center;
  min-height: 250px;
  border-style: dashed;
  border-width: 2px;
  background: color-mix(in srgb, var(--kart) 55%, transparent);
  box-shadow: none;
  cursor: pointer;
  transition: border-color var(--gecis), background var(--gecis), translate var(--gecis);
}
.bot-kart--bos:hover { border-color: var(--altin); background: var(--kart); translate: 0 -2px; }
.bot-kart--bos .durum-kutu__simge { background: var(--altin); color: var(--altin-yazi); border-color: var(--altin-kenar); box-shadow: inset 0 3px 0 var(--altin-parlak), 0 3px 0 var(--altin-derinlik); }

.olcu-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.olcu { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.olcu__ust { display: flex; align-items: center; gap: 7px; font-size: var(--y-s); color: var(--soluk); font-weight: 700; }
.olcu__ust .simge { width: 16px; height: 16px; }
.olcu__deger { margin-left: auto; color: var(--yazi); font-weight: 800; font-variant-numeric: tabular-nums; }
.cubuk--can .cubuk__dolu { background: linear-gradient(180deg, #ffb3b3 0 2px, #ff5a5f 2px); }
.cubuk--aclik .cubuk__dolu { background: linear-gradient(180deg, #ffe0b0 0 2px, #e8953a 2px); }
.cubuk--xp .cubuk__dolu { background: linear-gradient(180deg, #e3ffc4 0 2px, #7fd05e 2px); }
.olcu--can .simge { color: #ff5a5f; }
.olcu--aclik .simge { color: #e8953a; }
.olcu--xp .simge { color: var(--iyi); }

.bilgi-satirlari { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bilgi-kutu {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--yuzey2); border: 1px solid var(--kart-kenar);
  min-width: 0;
}
.bilgi-kutu span { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--soluk); }
.bilgi-kutu b { font-weight: 800; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* durum noktası (canlı) */
.durum-nokta { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #59606e; margin-left: 2px; }
.durum-nokta--iyi { background: var(--iyi); box-shadow: 0 0 0 0 color-mix(in srgb, var(--iyi) 60%, transparent); animation: nabiz 2s infinite; }
.durum-nokta--dikkat { background: var(--dikkat); animation: nabiz-d 1.2s infinite; }
.durum-nokta--hata { background: var(--hata); }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--iyi) 55%, transparent); } 70% { box-shadow: 0 0 0 5px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes nabiz-d { 50% { opacity: .35; } }

.kafa--bot { background: linear-gradient(160deg, #3a3f4b, #23262f); border-color: #0b0c10; box-shadow: inset 0 3px 0 #4a505d, 0 3px 0 #0b0c10; color: #fff; }

/* modül şalterleri */
.moduller { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.modul {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px; border-radius: 14px;
  background: var(--yuzey2); border: 1px solid var(--kart-kenar);
}
.modul__ust { display: flex; align-items: center; gap: 10px; }
.modul__ust .simge { color: var(--altin); }
.modul__ad { font-weight: 800; }
.modul__aciklama { color: var(--soluk); font-size: var(--y-s); line-height: 1.45; }
.modul__ayar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.modul__ayar .alan { height: 38px; font-size: var(--y-s); border-width: 1px; }
.modul--acik { border-color: color-mix(in srgb, var(--altin) 35%, var(--kart-kenar)); background: color-mix(in srgb, var(--altin) 6%, var(--yuzey2)); }

.secici { display: inline-flex; padding: 4px; gap: 4px; border-radius: 11px; background: var(--panel); border: 1px solid var(--kart-kenar); flex-wrap: wrap; }
.secici button { height: 32px; padding: 0 12px; border-radius: 8px; color: var(--soluk); font-weight: 800; font-size: var(--y-s); }
.secici button:hover { color: var(--yazi); background: var(--yuzey2); }
.secici button[aria-pressed="true"] { background: var(--altin); color: var(--altin-yazi); box-shadow: inset 0 2px 0 var(--altin-parlak), 0 2px 0 var(--altin-derinlik); }

/* ================================================================== */
/* bot detayı                                                          */
/* ================================================================== */
.bot-ust {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 20px;
}
.bot-ust .kafa { --boy: 64px; }
.bot-ust__ad { font-size: 26px; font-weight: 900; line-height: 1.1; }
.bot-ust__durum { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--soluk); font-weight: 700; flex-wrap: wrap; }
.bot-ust__eylem { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.sekme-cubugu { position: sticky; top: calc(var(--ust-h) + 8px); z-index: 20; }
.sekme-cubugu .sekmeler { width: 100%; max-width: 100%; box-shadow: 0 10px 20px rgba(0, 0, 0, .35); scrollbar-width: none; }
.sekme-cubugu .sekmeler::-webkit-scrollbar { display: none; }

.uyari-serit + .uyari-serit { margin-top: -10px; }

/* sohbet */
.sohbet {
  display: flex; flex-direction: column;
  height: min(68vh, 640px);
  min-height: 360px;
  padding: 0;
  overflow: hidden;
}
.sohbet__arac { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--kart-kenar); }
.sohbet__arac .alan { height: 36px; max-width: 200px; font-size: var(--y-s); border-width: 1px; }
.sohbet__liste {
  position: relative;
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 10px 6px 10px 14px;
  background: #0b0c10;
  font-size: 14px;
  line-height: 1.5;
  overscroll-behavior: contain;
  user-select: text;
}
.sohbet__satir { display: flex; gap: 8px; padding: 3px 8px 3px 4px; border-radius: 6px; position: relative; overflow-wrap: anywhere; }
.sohbet__satir:hover { background: #15171c; }
.sohbet__satir--anma { background: color-mix(in srgb, var(--altin) 9%, transparent); box-shadow: inset 2px 0 0 var(--altin); }
.sohbet__saat { color: #5f6675; font-size: 12px; font-variant-numeric: tabular-nums; flex: none; padding-top: 2px; }
.sohbet__metin { flex: 1; min-width: 0; }
.sohbet__metin .mc-k { font-weight: 800; }
.sohbet__satir--giden .sohbet__metin { color: var(--altin); }
.sohbet__satir--hata .sohbet__metin { color: var(--hata); }
.sohbet__satir--uyari .sohbet__metin { color: var(--dikkat); }
.sohbet__satir--bilgi .sohbet__metin, .sohbet__satir--debug .sohbet__metin { color: #8f97a8; }
.sohbet__satir--basari .sohbet__metin { color: var(--iyi); }
.sohbet__satir--fisilti { background: color-mix(in srgb, #b26bff 10%, transparent); }
.sohbet__satir-eylem { display: none; gap: 2px; position: absolute; right: 6px; top: 1px; background: #15171c; border-radius: 6px; }
.sohbet__satir:hover .sohbet__satir-eylem { display: flex; }
.sohbet__satir-eylem button { width: 26px; height: 24px; display: grid; place-items: center; border-radius: 5px; color: var(--soluk); }
.sohbet__satir-eylem button:hover { background: var(--yuzey2); color: var(--yazi); }
.sohbet__satir-eylem .simge { width: 14px; height: 14px; }
.sohbet__yeni {
  position: absolute; left: 50%; bottom: 84px; translate: -50% 0; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: 16px;
  background: var(--altin); color: var(--altin-yazi); font-weight: 800; font-size: var(--y-s);
  box-shadow: inset 0 2px 0 var(--altin-parlak), 0 3px 0 var(--altin-derinlik), 0 8px 18px rgba(0, 0, 0, .5);
}
.sohbet__gonder { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--kart-kenar); background: var(--kart); position: relative; }
.sohbet__gonder .alan { flex: 1; }
.sohbet__sayac { position: absolute; right: 152px; top: 26px; font-size: 11px; color: #6a7181; font-weight: 700; pointer-events: none; }
.sohbet__oneriler {
  position: absolute; left: 14px; right: 14px; bottom: calc(100% + 4px); z-index: 3;
  display: flex; flex-direction: column;
  max-height: 220px; overflow-y: auto;
  padding: 6px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--kart-kenar); box-shadow: var(--golge-yuzen);
}
.sohbet__oneri { display: flex; gap: 10px; align-items: baseline; text-align: left; padding: 8px 10px; border-radius: 8px; }
.sohbet__oneri:hover, .sohbet__oneri[aria-selected="true"] { background: var(--yuzey2); }
.sohbet__oneri code { color: var(--altin); font-weight: 700; }
.sohbet__oneri span { color: var(--soluk); font-size: var(--y-s); }
.sohbet__bos { color: #5f6675; padding: 30px 10px; text-align: center; }

/* envanter */
.envanter { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.yuvalar { display: grid; grid-template-columns: repeat(9, var(--yuva)); gap: 4px; --yuva: 52px; }
.yuvalar--dikey { grid-template-columns: repeat(4, var(--yuva)); }
.yuvalar--tek { grid-template-columns: var(--yuva); }
.envanter__panel {
  display: inline-flex; flex-direction: column; gap: 14px;
  padding: 14px; border-radius: 12px;
  background: #1b1b1c;
  border: 2px solid;
  border-color: #3a3a3e #0e0e0f #0e0e0f #3a3a3e;
}
.envanter__bolum { display: flex; flex-direction: column; gap: 6px; }
.envanter__bolum .ust-etiket { font-size: 11px; }
.envanter__zirh { display: flex; gap: 14px; align-items: flex-start; }
.yuva {
  position: relative;
  width: var(--yuva); height: var(--yuva);
  display: grid; place-items: center;
  background: #2c2c2f;
  border: 2px solid;
  border-color: #0e0e0f #4a4a4f #4a4a4f #0e0e0f;
  border-radius: 3px;
  cursor: pointer;
  transition: background .1s;
}
.yuva:hover { background: #3a3a3f; }
.yuva--elde { box-shadow: 0 0 0 2px var(--altin); }
.yuva--secili { background: color-mix(in srgb, var(--altin) 35%, #2c2c2f); box-shadow: 0 0 0 2px var(--altin), 0 0 14px color-mix(in srgb, var(--altin) 50%, transparent); }
.yuva__resim { width: var(--hucre, 32px); height: var(--hucre, 32px); image-rendering: pixelated; background-image: url('../gorsel/esyalar.webp'); background-size: calc(41 * var(--hucre, 32px)) auto; background-repeat: no-repeat; }
.yuva__resim--buyulu { filter: drop-shadow(0 0 2px rgba(185, 107, 255, .95)); }
.yuva__harf { font-size: 11px; font-weight: 800; color: #c9ccd4; text-align: center; line-height: 1.1; padding: 2px; overflow: hidden; }
.yuva__adet { position: absolute; right: 3px; bottom: 1px; font-weight: 900; font-size: 14px; color: #fff; text-shadow: 2px 2px 0 #3f3f3f; font-variant-numeric: tabular-nums; }
.yuva__can { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; background: #000; }
.yuva__can::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--oran) * 100%); background: hsl(calc(var(--oran) * 120) 90% 50%); }
.envanter__detay { display: flex; flex-direction: column; gap: 12px; }
.esya-bilgi { display: flex; gap: 12px; align-items: center; }
.esya-bilgi .yuva { cursor: default; }

/* konum kumandası */
.kumanda { display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 64px); gap: 8px; }
.kumanda .d3 { --bh: 54px; width: 64px; }
.kumanda .d3 .d3__yuz { padding: 0; }
.kumanda__bos { visibility: hidden; }
.bakis-kumanda { display: grid; grid-template-columns: repeat(4, auto); gap: 8px; }

/* depo */
.depo-liste { display: flex; flex-direction: column; gap: 8px; }
.depo-oge {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--yuzey2); border: 1px solid var(--kart-kenar);
}
.depo-oge__sira { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--altin); color: var(--altin-yazi); font-weight: 900; box-shadow: inset 0 2px 0 var(--altin-parlak); flex: none; }
.depo-oge__koor { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-weight: 700; }
.depo-oge__eylem { margin-left: auto; display: flex; gap: 4px; }
.depo-oge__eylem .sade { min-height: 34px; padding: 0 9px; }

/* eylemler */
.eylem-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.eylem-dugme {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px; border-radius: 14px;
  background: var(--yuzey2); border: 1px solid var(--kart-kenar);
  box-shadow: 0 3px 0 #101217;
  transition: translate var(--gecis), border-color var(--gecis), background var(--gecis);
}
.eylem-dugme:hover:not(:disabled) { translate: 0 -2px; border-color: #3a3f4b; background: var(--yuzey3); }
.eylem-dugme:disabled { opacity: .5; }
.eylem-dugme__simge {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: none;
  color: var(--altin);
  background: linear-gradient(160deg, color-mix(in srgb, var(--altin) 16%, var(--panel)), color-mix(in srgb, var(--altin) 6%, var(--panel)));
  border: 1px solid color-mix(in srgb, var(--altin) 32%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--altin) 22%, transparent);
}
.eylem-dugme__simge .simge { width: 22px; height: 22px; }
.eylem-dugme--tehlike .eylem-dugme__simge {
  color: var(--hata);
  background: linear-gradient(160deg, color-mix(in srgb, var(--hata) 16%, var(--panel)), color-mix(in srgb, var(--hata) 6%, var(--panel)));
  border-color: color-mix(in srgb, var(--hata) 34%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hata) 20%, transparent);
}
.eylem-dugme__metin { min-width: 0; }
.eylem-dugme__metin b { display: block; font-weight: 800; color: var(--yazi); }
.eylem-dugme__metin span { display: block; color: var(--soluk); font-size: var(--y-s); line-height: 1.35; margin-top: 2px; }

.miktar-cipler { display: flex; gap: 6px; flex-wrap: wrap; }
.miktar-cipler button { height: 32px; padding: 0 12px; border-radius: 9px; background: var(--yuzey2); border: 1px solid var(--kart-kenar); font-weight: 800; font-size: var(--y-s); color: var(--soluk); }
.miktar-cipler button:hover { color: var(--yazi); border-color: #3a3f4b; }

/* bakiye kutuları */
.bakiye-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bakiye-kutu { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--yuzey2); border: 1px solid var(--kart-kenar); }
.bakiye-kutu .simge { width: 28px; height: 28px; color: var(--altin); }
.bakiye-kutu b { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; display: block; }
.bakiye-kutu span { color: var(--soluk); font-size: var(--y-s); }

/* paket içeriği listesi */
.paket-liste { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.paket-liste li { display: flex; gap: 10px; align-items: center; color: #d6dbe5; }
.paket-liste .simge { color: var(--iyi); }

/* ================================================================== */
/* etkinlik akışı                                                       */
/* ================================================================== */
.akis { display: flex; flex-direction: column; }
.akis__oge { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 4px; border-bottom: 1px solid #23262f; }
.akis__oge:last-child { border-bottom: 0; }
.akis__simge { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--yuzey2); border: 1px solid var(--kart-kenar); color: var(--soluk); }
.akis__simge .simge { width: 17px; height: 17px; }
.akis__oge--basari .akis__simge { color: var(--iyi); }
.akis__oge--uyari .akis__simge { color: var(--dikkat); }
.akis__oge--hata .akis__simge { color: var(--hata); }
.akis__baslik { font-weight: 800; }
.akis__govde { color: var(--soluk); font-size: var(--y-s); margin-top: 2px; overflow-wrap: anywhere; }
.akis__zaman { color: #6a7181; font-size: 12px; white-space: nowrap; padding-top: 2px; }

/* çevrimiçi grafiği */
.grafik { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 10px; }
.grafik__sutun { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; min-width: 0; }
.grafik__cubuk {
  width: 100%; max-width: 30px;
  height: calc(var(--oran) * 100% - 20px);
  min-height: 3px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--altin-parlak) 0 2px, var(--altin) 2px);
  box-shadow: 0 3px 0 var(--altin-derinlik);
}
.grafik__cubuk--bos { background: #262a33; box-shadow: none; }
.grafik__gun { font-size: 10px; color: #6a7181; font-weight: 700; }

/* tablo */
.tablo-kap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--kart-kenar); }
.tablo { width: 100%; border-collapse: collapse; font-size: var(--y-s); }
.tablo th { text-align: left; padding: 11px 12px; color: var(--soluk); font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; background: var(--panel); white-space: nowrap; }
.tablo td { padding: 11px 12px; border-top: 1px solid #23262f; white-space: nowrap; }
.tablo tr:hover td { background: #1f2229; }
.tablo td.sar { white-space: normal; min-width: 180px; }

/* istatistik kutuları */
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat b { font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat span { color: var(--soluk); font-size: var(--y-s); font-weight: 700; }

/* adım listesi */
.adimlar { display: flex; flex-direction: column; gap: 12px; counter-reset: adim; }
.adim { display: flex; gap: 14px; align-items: flex-start; }
.adim::before {
  counter-increment: adim; content: counter(adim);
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--altin); color: var(--altin-yazi); font-weight: 900;
  box-shadow: inset 0 2px 0 var(--altin-parlak), 0 3px 0 var(--altin-derinlik);
}
.adim b { display: block; }
.adim span { color: var(--soluk); font-size: var(--y-s); }

/* SSS */
.sss details { border-bottom: 1px solid #23262f; }
.sss details:last-child { border-bottom: 0; }
.sss summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 16px 4px; font-weight: 800; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; margin-left: auto; color: var(--altin); font-size: 22px; font-weight: 900; line-height: 1; transition: rotate var(--gecis); }
.sss details[open] summary::after { rotate: 45deg; }
.sss details p { color: var(--soluk); padding: 0 4px 16px; line-height: 1.6; }

/* ================================================================== */
/* giriş ve vitrin (oturum yokken)                                     */
/* ================================================================== */
.duvar {
  position: fixed; inset: 0; z-index: -1;
  background: url('../gorsel/arkaplan.webp') center / cover no-repeat;
}
.duvar::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(8, 9, 12, .35) 0%, rgba(8, 9, 12, .82) 75%),
    linear-gradient(180deg, rgba(8, 9, 12, .4), rgba(8, 9, 12, .92));
}
.vitrin-ust {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  height: 72px; padding: 0 clamp(16px, 4vw, 48px);
  background: color-mix(in srgb, #0a0c10 70%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.vitrin-ust__marka { display: flex; align-items: center; gap: 10px; font-weight: 900; }
.vitrin-ust__marka img { width: 40px; height: 40px; border-radius: 10px; }
.vitrin-ust__sag { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.vitrin { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px) 80px; display: flex; flex-direction: column; gap: 70px; }
.kahraman { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; padding-top: clamp(30px, 6vw, 80px); }
.kahraman__rozet { display: inline-flex; margin-bottom: 18px; }
.kahraman h1 { font-size: clamp(36px, 5.5vw, 62px); line-height: 1.02; letter-spacing: -.5px; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); }
.kahraman h1 em { font-style: normal; color: var(--altin); }
.kahraman h1 + p { color: #c9d0dc; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; margin-top: 18px; max-width: 54ch; }
.kahraman__eylem { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.kahraman__not { margin-top: 16px; color: var(--soluk); font-size: var(--y-s); display: flex; align-items: center; gap: 8px; }
.logo-yigin { display: flex; flex-direction: column; align-items: center; }
.logo-yigin img { width: min(100%, 460px); height: auto; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .6)); }
.logo-yigin img + img { margin-top: calc(min(100%, 460px) * -.1); }
.fiyat-kart { padding: 26px; text-align: left; position: relative; overflow: hidden; }
.fiyat-kart::before { content: ""; position: absolute; inset: -40% -30% auto auto; width: 300px; height: 300px; background: radial-gradient(circle, color-mix(in srgb, var(--altin) 22%, transparent), transparent 70%); pointer-events: none; }
.fiyat-kart ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 20px 0 24px; }
.fiyat-kart li { display: flex; gap: 10px; align-items: flex-start; color: #d6dbe5; }
.fiyat-kart li .simge { color: var(--iyi); margin-top: 1px; }
.bolum-baslik { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 26px; }
.bolum-baslik h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 900; }
.bolum-baslik p { color: var(--soluk); max-width: 60ch; }
.ozellik { display: flex; flex-direction: column; gap: 10px; }
.ozellik__simge { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: var(--altin); color: var(--altin-yazi); border: 2px solid var(--altin-kenar); box-shadow: inset 0 3px 0 var(--altin-parlak), 0 3px 0 var(--altin-derinlik); }
.ozellik b { font-size: 17px; font-weight: 900; }
.ozellik span { color: var(--soluk); line-height: 1.55; }
.karsilastirma td:first-child { font-weight: 700; }
.karsilastirma .simge { width: 18px; height: 18px; }
.vitrin-alt { border-top: 1px solid rgba(255, 255, 255, .06); padding: 30px clamp(16px, 4vw, 48px) calc(30px + var(--guvenli-alt)); color: var(--soluk); font-size: var(--y-s); display: flex; gap: 16px; flex-wrap: wrap; align-items: center; background: rgba(10, 12, 16, .85); }
.vitrin-alt a { color: var(--soluk); font-weight: 700; }
.vitrin-alt a:hover { color: var(--altin); }

.giris-kap { min-height: calc(100vh - 72px); min-height: calc(100dvh - 72px); display: grid; place-items: center; padding: 30px 16px 60px; }
.giris-kart { width: min(440px, 100%); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.giris-kart__ust { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.giris-kart__ust img { width: 64px; height: 64px; border-radius: 16px; }
.giris-kart__ust p { color: var(--soluk); }
.onay-kutu { display: flex; align-items: center; gap: 10px; color: var(--soluk); font-weight: 700; cursor: pointer; user-select: none; }
.onay-kutu input { width: 20px; height: 20px; accent-color: var(--altin); cursor: pointer; }

/* ================================================================== */
/* duyarlı (tablet ve telefon)                                          */
/* ================================================================== */
@media (max-width: 1180px) {
  .izgara--pano { grid-template-columns: minmax(0, 1fr); }
  .izgara--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .kabuk { grid-template-columns: minmax(0, 1fr); }
  .yan { display: none; }
  .ust { padding: 0 16px; padding-top: var(--guvenli-ust); height: calc(var(--ust-h) - 6px + var(--guvenli-ust)); }
  .ust__marka { display: flex; }
  .ust__baslik { display: none; }
  .alt-menu { display: grid; }
  .sayfa { padding: 18px 16px calc(var(--alt-h) + var(--guvenli-alt) + 28px); gap: 18px; }
  .sayfa-baslik h1 { font-size: 24px; }
  .izgara--2, .izgara--3 { grid-template-columns: minmax(0, 1fr); }
  .botlar-izgara { grid-template-columns: minmax(0, 1fr); }
  .kahraman { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .logo-yigin { display: none; }
  .bildirimler { right: 12px; left: 12px; width: auto; bottom: calc(var(--alt-h) + var(--guvenli-alt) + 12px); }
  .sekme-cubugu { top: calc(var(--ust-h) - 4px + var(--guvenli-ust)); margin: 0 -16px; padding: 0 16px; }
  .sekme-cubugu .sekmeler { border-radius: 12px; }
  .envanter { grid-template-columns: minmax(0, 1fr); }
  .sohbet { height: calc(100dvh - var(--ust-h) - var(--alt-h) - var(--guvenli-alt) - 70px); min-height: 420px; }
  .sohbet__arac { padding: 10px; gap: 6px; }
  .sohbet__arac .alan { max-width: none; flex: 1 1 120px; }
  .sohbet__gonder { padding: 10px; }
  .sohbet__liste { font-size: 13.5px; }
  .sohbet__satir-eylem { display: flex; position: static; background: none; margin-left: auto; }
  .sohbet__satir-eylem button { width: 30px; height: 28px; }
  .tablo-kap { margin: 0 -2px; }
}

@media (max-width: 560px) {
  :root { --y-3xl: 24px; }
  .kredi-cip__metin-uzun { display: none; }
  .abo { padding: 18px; }
  .abo__birim b { font-size: 34px; }
  .abo__sayac { gap: 14px; }
  .abo__oto { margin-left: 0; width: 100%; }
  .abo__eylem .d3 { flex: 1 1 100%; }
  .bilgi-satirlari { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moduller { grid-template-columns: minmax(0, 1fr); }
  .olcu-izgara { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bot-ust { padding: 16px; }
  .bot-ust .kafa { --boy: 52px; }
  .bot-ust__ad { font-size: 22px; }
  .bot-ust__eylem { width: 100%; margin-left: 0; }
  .bot-ust__eylem .d3 { flex: 1; }
  .bot-ust__eylem .d3--simge { flex: none; }
  .yuva__adet { font-size: 12px; right: 1px; }
  .envanter__panel { padding: 10px; width: 100%; }
  .bakiye-izgara { grid-template-columns: minmax(0, 1fr); }
  .eylem-izgara { grid-template-columns: minmax(0, 1fr); }
  .kart { padding: 16px; }
  .giris-kart { padding: 22px; }
  .vitrin { gap: 50px; }
  .iletisim { width: calc(100vw - 24px); max-height: calc(100dvh - 40px); }
  .iletisim__alt .d3 { flex: 1 1 100%; }
  .tablo th, .tablo td { padding: 10px 9px; }
  .sohbet__sayac { display: none; }
  .vitrin-ust .d3--gizle-dar { display: none; }
}

@media (max-width: 680px) {
  .yuvalar { --yuva: min(52px, calc((100vw - 132px) / 9)); gap: 3px; }
  .envanter__panel { padding: 8px; }
}

@media (hover: none) {
  .d3:not(:disabled):not([aria-disabled="true"]):hover { animation: none; translate: none; padding-bottom: var(--derinlik); margin-bottom: 0; filter: none; box-shadow: 0 7px 14px rgba(0, 0, 0, .4); }
  .d3:not(:disabled):not([aria-disabled="true"]):active { padding-bottom: calc(var(--derinlik) - 2px); margin-bottom: 2px; translate: 0 2px; }
  .kart--tiklanir:hover, .bot-kart--bos:hover, .eylem-dugme:hover:not(:disabled) { translate: none; }
}