/* =====================================================================
   SolvenCoder SaaS - stil
   Tasarim dili indirilen Toorun sablonundan alindi:
   Quicksand + Open Sans, lacivert metin, sari vurgu, hap butonlar.
   ===================================================================== */

:root{
  --lacivert:#1d304d;
  --lacivert-acik:#3c5478;
  --gri:#6b7a90;
  --cizgi:#e8eaed;
  --zemin:#f6f8fb;
  --kagit:#ffffff;

  --sari:#ffc93c;
  --sari-acik:#ffe254;
  --sari-koyu:#ffba49;

  --yesil:#22a06b;
  --kirmizi:#e0455c;
  --mavi:#2f7de1;

  --yzBaslik:'Quicksand','Segoe UI',system-ui,sans-serif;
  --yzMetin:'Open Sans','Segoe UI',system-ui,sans-serif;

  --golge:0 2px 8px rgba(29,48,77,.06);
  --golge-orta:0 8px 28px rgba(29,48,77,.10);
  --hap:100px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--yzMetin);
  font-size:16px;line-height:1.65;
  color:var(--lacivert);
  background:var(--zemin);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{font-family:var(--yzBaslik);font-weight:600;line-height:1.22;color:var(--lacivert)}
h1{font-size:clamp(2rem,4.4vw,3.25rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.75rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.75rem)}
h4{font-size:1.25rem}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.kap{width:min(1180px,92vw);margin:0 auto}
.orta{text-align:center}
.gri{color:var(--gri)}

/* ------------------------------------------------------------ buton */
.dg{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border:none;border-radius:var(--hap);
  font:600 15px/1 var(--yzBaslik);letter-spacing:.01em;
  cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s;
  white-space:nowrap;
}
.dg:active{transform:translateY(1px)}
.dg-ana{
  background:linear-gradient(135deg,var(--sari-acik),var(--sari-koyu));
  color:#3d2d00;box-shadow:0 4px 14px rgba(255,186,73,.42);
}
.dg-ana:hover{box-shadow:0 8px 22px rgba(255,186,73,.55);transform:translateY(-1px)}
.dg-koyu{background:var(--lacivert);color:#fff}
.dg-koyu:hover{background:var(--lacivert-acik)}
.dg-cizgi{background:transparent;color:var(--lacivert);box-shadow:inset 0 0 0 2px var(--cizgi)}
.dg-cizgi:hover{box-shadow:inset 0 0 0 2px var(--lacivert)}
.dg-kucuk{padding:9px 18px;font-size:13.5px}
.dg-tam{width:100%}
.dg[disabled],.dg.pasif{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}

/* -------------------------------------------------------------- ust */
.ust{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--cizgi);
}
.ust-ic{display:flex;align-items:center;gap:22px;height:72px}
/*
 * Baslikta TAM logo kullanilmiyor. Logo 2.6:1 oraninda ve icindeki
 * piksel yazi 38px yukseklige sikisinca okunmuyor. Onun yerine arma
 * ikonu + gercek yazi: her olcude net.
 */
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo-arma{
  height:36px;width:36px;flex:none;display:block;
  image-rendering:pixelated;   /* piksel sanat bulaniklasmasin */
}
.logo-yazi{
  font:600 20px/1 var(--yzBaslik);letter-spacing:-.01em;color:var(--lacivert);
}
.logo-yazi b{font-weight:700;color:var(--sari-koyu)}
/* Alt bilgide zemin koyu, tam logo rahat siğiyor */
.alt .logo-im{height:46px;width:auto;display:block;image-rendering:pixelated}
.ust-menu{display:flex;gap:6px;margin-left:auto;align-items:center}
.ust-menu a{
  padding:9px 15px;border-radius:var(--hap);
  font:600 14.5px/1 var(--yzBaslik);color:var(--gri);transition:.18s;
}
.ust-menu a:hover{color:var(--lacivert);background:#eef1f6}
.ust-menu a.etkin{color:var(--lacivert);background:#eef1f6}

/* ---------------------------------------------------------- kahraman */
.kahraman{padding:78px 0 66px;position:relative;overflow:hidden}
.kahraman::before{
  content:"";position:absolute;inset:-30% 40% 40% -20%;
  background:radial-gradient(circle,rgba(255,201,60,.18),transparent 62%);
  pointer-events:none;
}
.kahraman-iz{
  position:relative;display:grid;grid-template-columns:1.05fr .95fr;
  gap:44px;align-items:center;
}
.kahraman-ic{position:relative;max-width:620px}

.kahraman-gorsel{position:relative;display:grid;place-items:center}
/*
 * Gorsel arka plani silinmis bir 3B cizim; kaynak 344px genisliginde.
 * width:100% verilirse alanina yayilip bulaniklasiyor. Dogal olcusunun
 * biraz uzerinde sinirlaniyor, boylece net kaliyor.
 * Golge/cerceve YOK: gorsel zaten seffaf, kutu icine alinca kesik durur.
 */
.kahraman-gorsel img{
  width:100%;max-width:430px;height:auto;
  filter:drop-shadow(0 24px 34px rgba(29,48,77,.18));
}
/* Gorsel uretilene kadar duran cerceve */
.gorsel-yer{
  aspect-ratio:4/3;border-radius:20px;
  border:2px dashed var(--cizgi);background:var(--kagit);
  display:grid;place-items:center;gap:12px;align-content:center;
  color:var(--gri);font:600 14px/1 var(--yzBaslik);
}
.gorsel-yer img{width:78px;height:78px;opacity:.4;box-shadow:none;border-radius:0}
/*
 * Rozet.
 *
 * Onceden yanip sonen yesil bir nokta vardi; o isaret "canli yayinda"
 * demek ve buradaki mesajla ilgisi yoktu. Yerine tarayici penceresi
 * simgesi kondu: cumle zaten tarayicida calismaktan bahsediyor.
 */
.rozet{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 17px 9px 13px;border-radius:var(--hap);
  font:600 13.5px/1 var(--yzBaslik);letter-spacing:.005em;
  color:var(--lacivert);
  background:linear-gradient(135deg,#fff,#fffaf0);
  border:1px solid rgba(255,186,73,.42);
  box-shadow:0 2px 5px rgba(29,48,77,.05),
             0 10px 26px rgba(255,186,73,.16),
             inset 0 1px 0 #fff;
  margin-bottom:22px;
}
.rozet svg{
  width:17px;height:17px;flex:none;color:var(--sari-koyu);
}
.kahraman p.acik{font-size:1.08rem;color:var(--gri);margin:18px 0 30px;max-width:600px}
.kahraman-dg{display:flex;gap:12px;flex-wrap:wrap}

/* ------------------------------------------------------------ bolum */
.bolum{padding:64px 0}
.bolum-bas{max-width:620px;margin:0 0 38px}
.bolum-bas.ortali{margin-left:auto;margin-right:auto;text-align:center}
.bolum-bas p{color:var(--gri);margin-top:12px}
.etiket{
  display:inline-block;padding:5px 13px;border-radius:var(--hap);
  background:rgba(255,201,60,.18);color:#8a6200;
  font:700 12px/1.6 var(--yzBaslik);letter-spacing:.09em;
  text-transform:uppercase;margin-bottom:14px;
}

/* ------------------------------------------------------------- izgara */
.izgara{display:grid;gap:22px}
.iz-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.iz-3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}

/* -------------------------------------------------------------- kart */
.kart{
  background:var(--kagit);border:1px solid var(--cizgi);
  border-radius:18px;padding:26px;box-shadow:var(--golge);
  transition:transform .2s,box-shadow .2s;
}
.kart:hover{transform:translateY(-3px);box-shadow:var(--golge-orta)}
.kart h3{margin-bottom:10px}
.kart p{color:var(--gri);font-size:.95rem}

/* oyun karti */
.oyun-kart{display:flex;flex-direction:column}
.oyun-gorsel{
  height:150px;border-radius:13px;margin-bottom:18px;
  background:linear-gradient(135deg,#2a3f63,#1d304d);
  display:grid;place-items:center;position:relative;overflow:hidden;
}
.oyun-gorsel span{
  font:700 clamp(1.1rem,2.4vw,1.5rem)/1.2 var(--yzBaslik);
  color:var(--sari);text-align:center;padding:0 18px;letter-spacing:.02em;
}
.oyun-gorsel::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%,rgba(255,201,60,.22),transparent 60%);
}
.oyun-alt{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:12px}
.fiyat{font:700 1.6rem/1 var(--yzBaslik);color:var(--lacivert)}
.fiyat small{font-size:.82rem;font-weight:600;color:var(--gri)}

/* paket karti */
.paket-kart{position:relative;display:flex;flex-direction:column}
.paket-kart.one-cikan{border-color:var(--sari);box-shadow:0 10px 34px rgba(255,186,73,.22)}
.paket-etiket{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  padding:6px 16px;border-radius:var(--hap);
  background:linear-gradient(135deg,var(--sari-acik),var(--sari-koyu));
  color:#3d2d00;font:700 12px/1 var(--yzBaslik);letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;
}
.paket-nokta{width:12px;height:12px;border-radius:4px;display:inline-block;margin-right:9px}
.ozellik{list-style:none;margin:18px 0 22px;display:grid;gap:11px}
.ozellik li{display:flex;align-items:flex-start;gap:10px;font-size:.94rem;color:var(--lacivert-acik)}
.ozellik li::before{
  content:"";flex:none;width:19px;height:19px;border-radius:50%;margin-top:2px;
  background:rgba(34,160,107,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322a06b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* --------------------------------------------------------- adimlar
 *
 * Uc adim, aralarindan gecen kesikli bir cizgiyle bagli. Numaralar
 * kartin ust kenarina oturuyor ve arkalarinda beyaz halka var; cizgi
 * numaranin altindan geciyormus gibi duruyor.
 */
.adimlar{background:var(--kagit);border-block:1px solid var(--cizgi)}

/*
 * "Gerekmez" satiri.
 *
 * Kullanicinin en cok takildigi uc sey; adim anlatiminin hemen ustunde
 * duruyor. Ikon carpi DEGIL "yasak" isareti: carpi hata gibi okunuyor,
 * burada anlatilan sey hata degil, gerekmeyen sey.
 */
.gerekmez{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px;margin:0 0 42px;
}
.gerekmez li{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 17px 9px 13px;border-radius:var(--hap);
  background:var(--zemin);border:1px solid var(--cizgi);
  font:600 13.5px/1 var(--yzBaslik);color:var(--lacivert-acik);
}
.gerekmez li::before{
  content:"";flex:none;width:17px;height:17px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffba49' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E") center/17px no-repeat;
}

.adim-iz{
  list-style:none;position:relative;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:26px;padding-top:30px;
}
/* Adimlari birlestiren cizgi. Numaralarin dikey ortasinda duruyor. */
.adim-iz::before{
  content:"";position:absolute;top:30px;left:16%;right:16%;height:2px;
  background:repeating-linear-gradient(90deg,
    var(--cizgi) 0 9px, transparent 9px 18px);
  z-index:0;
}

.adim{
  position:relative;z-index:1;
  background:var(--kagit);
  border:1px solid var(--cizgi);border-radius:18px;
  padding:44px 24px 26px;text-align:center;
  box-shadow:var(--golge);
  transition:transform .22s,box-shadow .22s,border-color .22s;
}
.adim:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 36px rgba(29,48,77,.11);
  border-color:rgba(255,186,73,.55);
}

.adim-no{
  position:absolute;top:-1px;left:50%;
  transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;
  font:700 24px/1 var(--yzBaslik);color:#4a3600;
  background:linear-gradient(150deg,var(--sari-acik),var(--sari-koyu));
  /* Beyaz halka: kesikli cizgi numaranin arkasindan geciyor gibi dursun */
  box-shadow:0 0 0 8px var(--kagit),
             0 6px 16px rgba(255,186,73,.42);
}
.adim:hover .adim-no{
  box-shadow:0 0 0 8px var(--kagit),
             0 10px 24px rgba(255,186,73,.58);
}

.adim h3{font-size:1.28rem;margin-bottom:10px}
.adim p{color:var(--gri);font-size:.95rem;margin:0 auto;max-width:280px}

@media (max-width:820px){
  .adim-iz{grid-template-columns:1fr;gap:44px;padding-top:34px}
  /* Tek sutunda yatay cizgi anlamsiz; dikeye ceviriliyor */
  .adim-iz::before{
    top:34px;bottom:34px;left:50%;right:auto;
    width:2px;height:auto;transform:translateX(-50%);
    background:repeating-linear-gradient(180deg,
      var(--cizgi) 0 9px, transparent 9px 18px);
  }
}

/* ------------------------------------------------------------- form */
.form-kutu{
  max-width:440px;margin:52px auto;background:var(--kagit);
  border:1px solid var(--cizgi);border-radius:20px;
  padding:34px;box-shadow:var(--golge-orta);
}
.form-kutu h1{font-size:1.75rem;margin-bottom:6px}
.form-kutu > p{color:var(--gri);font-size:.94rem;margin-bottom:24px}
.alan{margin-bottom:16px}
.alan label{display:block;font:600 13.5px/1 var(--yzBaslik);margin-bottom:7px}
.alan input,.alan select,.alan textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--cizgi);
  border-radius:11px;font:400 15px/1.4 var(--yzMetin);
  color:var(--lacivert);background:#fbfcfe;transition:border-color .16s,background .16s;
}
.alan input:focus,.alan select:focus{
  outline:none;border-color:var(--sari-koyu);background:#fff;
}
.alan .ipucu{font-size:12.5px;color:var(--gri);margin-top:6px}
.form-alt{text-align:center;margin-top:20px;font-size:14px;color:var(--gri)}
.form-alt a{color:var(--mavi);font-weight:600}

/* -------------------------------------------------------- bildirim */
.bildirim{
  padding:13px 17px;border-radius:12px;margin-bottom:16px;
  font-size:14.5px;display:flex;gap:10px;align-items:flex-start;
  border:1px solid transparent;
}
.bildirim.basari{background:rgba(34,160,107,.10);border-color:rgba(34,160,107,.3);color:#12613f}
.bildirim.hata{background:rgba(224,69,92,.09);border-color:rgba(224,69,92,.28);color:#9c2033}
.bildirim.uyari{background:rgba(255,186,73,.14);border-color:rgba(255,186,73,.4);color:#8a5c00}
.bildirim.bilgi{background:rgba(47,125,225,.09);border-color:rgba(47,125,225,.26);color:#1b4f92}

/* ------------------------------------------------------------ panel */
.panel-govde{display:grid;grid-template-columns:250px 1fr;gap:26px;padding:28px 0 60px;align-items:start}
.yan{
  background:var(--kagit);border:1px solid var(--cizgi);border-radius:16px;
  padding:16px;box-shadow:var(--golge);position:sticky;top:92px;
}
.yan a{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;
  font:600 14.5px/1 var(--yzBaslik);color:var(--gri);margin-bottom:3px;transition:.15s;
}
.yan a:hover{background:#f1f4f9;color:var(--lacivert)}
.yan a.etkin{background:var(--lacivert);color:#fff}
.yan .yan-bas{
  font:700 11.5px/1 var(--yzBaslik);letter-spacing:.1em;text-transform:uppercase;
  color:#9aa6b8;padding:14px 13px 8px;
}
.yan-ic{min-width:0}

.kullanici-kutu{
  display:flex;align-items:center;gap:11px;padding:12px;
  border-radius:12px;background:#f4f6fa;margin-bottom:10px;
}
.avatar{
  width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--sari-acik),var(--sari-koyu));
  font:700 16px/1 var(--yzBaslik);color:#3d2d00;
}
.kullanici-kutu b{display:block;font:600 14.5px/1.3 var(--yzBaslik)}
.kullanici-kutu span{font-size:12px;color:var(--gri)}

.rutbe{
  display:inline-block;padding:3px 10px;border-radius:var(--hap);
  font:700 11px/1.7 var(--yzBaslik);letter-spacing:.05em;text-transform:uppercase;
}
.rutbe.uye{background:#eceff4;color:#5a6b82}
.rutbe.ajans{background:rgba(255,201,60,.2);color:#8a6200}
.rutbe.yayinci{background:rgba(47,125,225,.13);color:#1b4f92}
.rutbe.yonetici{background:rgba(224,69,92,.12);color:#9c2033}

/* durum kutulari */
.durum-iz{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:26px}
.durum{background:var(--kagit);border:1px solid var(--cizgi);border-radius:15px;padding:19px;box-shadow:var(--golge)}
.durum b{display:block;font:700 1.75rem/1.15 var(--yzBaslik)}
.durum span{font-size:13px;color:var(--gri)}

/* tablo */
.tablo-sar{overflow-x:auto;background:var(--kagit);border:1px solid var(--cizgi);border-radius:15px;box-shadow:var(--golge)}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{
  text-align:left;padding:13px 16px;background:#f5f7fa;
  font:700 12.5px/1 var(--yzBaslik);letter-spacing:.05em;text-transform:uppercase;color:#7b899d;
  white-space:nowrap;
}
td{padding:13px 16px;border-top:1px solid var(--cizgi);vertical-align:middle}
tr:hover td{background:#fafbfd}

/* --------------------------------------------------------------- alt */
.alt{background:var(--lacivert);color:#c6d1e2;padding:52px 0 26px;margin-top:70px}
.alt h4{color:#fff;font-size:1rem;margin-bottom:14px}
.alt a{color:#c6d1e2;font-size:14.5px;line-height:2}
.alt a:hover{color:var(--sari)}
.alt-iz{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px}
.alt-son{
  border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:20px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;
}

/* --------------------------------------------------------- duyarli */
@media (max-width:900px){
  .kahraman-iz{grid-template-columns:1fr;gap:30px}
  .kahraman-gorsel{order:-1}
  .panel-govde{grid-template-columns:1fr}
  .yan{position:static}
  .alt-iz{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ust-ic{height:64px;gap:12px}
  .ust-menu a{padding:8px 11px;font-size:13.5px}
  .kahraman{padding:48px 0 40px}
  .bolum{padding:44px 0}
  .kart{padding:20px}
}