/* MIHENKAR - ANASAYFA
 * ===================================================================
 *
 * AYRI DOSYA. `ortak.css` giris/kayit/profil sayfalarini da
 * besliyor; tanitim duzeni oralara bulasmasin diye burada.
 * Renk degiskenleri (`--vurgu`, `--zemin`, ...) ortak dosyadan
 * gelir ve EZILMEZ - marka tek kaynaktan.
 *
 * ## ISTENEN  (kullanici, 17.10.2026)
 *
 *   "biraz renk oyunu yapalim modernize edelim"
 *   "biraz matrix gorunumu falan - ya direkt soyle 2 tane
 *    yuzuk modeli resmi mi koyacagiz"
 *   "direkt cizim, 4 gorunus, tool kisimlarinin falan genel
 *    gorseller - yaninda biraz aciklama - hem sistemin
 *    tanitimi gibi olur"
 *   "bizim koyu renk guzel - 1 tane de acik renk ekle, boyle
 *    antika gibi sarimsi kremsi, yazilar altin renkleri,
 *    zumrutlu yakutlu yuzuk modelleri"
 *
 * Referans olarak kendi oteki projesini verdi (jargola.com.tr /
 * `04 - Tabu`): derin zeminli radyal degrade kahraman, agir
 * baslik yuzu, hap dugmeler, buyuk sayi seridi, genis bolumler.
 * Lacivert-krem paleti ALINMADI; Mihenkar'in kendi rengi var.
 *
 * ## SAYFA RITMI - koyu / koyu / ACIK / koyu
 *
 * Tek bir acik bolum bilerek: sayfa boyunca koyu akarken
 * ortadaki krem band "vitrin camekani" gibi duruyor ve renkli
 * taslar orada one cikiyor. Iki acik bolum olsa bu etki giderdi.
 *
 * ## GORSELLER UYDURMA DEGIL
 *
 * Hepsi motorun `taki.yakala` ciktisi (17.10.2026), altlarindaki
 * komut satirlari o goruntuyu ureten GERCEK komut. Pencere
 * panelindeki sayilar da olculdu: `tektas_yuzuk alasim=au_sari_18k`
 * -> ic cevre 54,35 mm / 6 tirnak / 3,22 g / su gecirmez / D1 gecti.
 */

/* --- YUZLER ------------------------------------------------------
 * Fraunces basliklarda: yuksek karsitlikli serif, taki icin
 * gotikten zarif. Archivo govdede - kullanicinin oteki markasinda
 * da ayni aile, iki proje arasinda tutarlilik.
 * Ikisi de SIL OFL; 6. kural (lisans suzgeci) karsilaniyor. */
:root{
  --baslik:"Fraunces",Georgia,"Times New Roman",serif;
  --govde:"Archivo","Segoe UI",system-ui,sans-serif;

  --derin:#141519;            /* koyu antrasit - kahraman ve alt serit */
  --krem:#f3ead9;

  /* ANTIKA BAND - acik bolumun kendi paleti. Zemin sarimsi
     parsomen, yazi koyu kahve, vurgu yanik altin. Koyu bolumun
     altin sarisi (#d8a94a) acik zeminde yeterince okunmuyor. */
  --parsomen:#f0e4cd;
  --parsomen2:#e6d5b6;
  --murekkep:#3a2c17;
  --murekkep-soluk:#7a6442;
  --yanik-altin:#9a6f1f;
}

body.anasayfa{font-family:var(--govde);font-size:16px;line-height:1.6}
.sinir{max-width:1120px;margin:0 auto;padding:0 22px;width:100%}

h1,h2,h3{font-family:var(--baslik);font-weight:600;line-height:1.12;
  margin:0;text-wrap:balance}
.kas{font:700 11.5px/1 var(--govde);letter-spacing:.2em;
  text-transform:uppercase;color:var(--vurgu);margin:0 0 12px}

/* --- UST SERIT --------------------------------------------------- */
.ust{position:sticky;top:0;z-index:9;background:#141519;
  border-bottom:1px solid rgba(216,169,74,.2)}
/* UST SATIR ICERIK SUTUNUYLA HIZALI.
   Once tam genislige cikarmistim; o zaman logo sayfanin sol
   kenarina, dugmeler sag kenarina yapisiyor ve asagidaki
   metinle hizalari kaciyordu (kullanici 17.10.2026:
   "bunlari asagidakilere gore hizalayalim"). `.sinir`
   kutusu geri geldi - logo basligin, dugmeler pencerenin
   hizasinda. */
.ust .sinir{display:flex;align-items:center;gap:12px;height:62px}

/* Dil secici anasayfada SERIT ICINDE akar. `ortak.css`teki
   `position:fixed` yalniz oteki sayfalar icin. */
.ust .dil{position:static;top:auto;right:auto;margin-left:8px}
.ust img{width:28px;height:28px}
.ust .ad{font:600 15px/1 var(--baslik);letter-spacing:.2em;
  color:var(--vurgu)}
/* Seridin sag ucundaki baglantilar: Tasarim / Giris / Hesap ac.
   Ilkine `margin-left:auto` - uc tanesi birlikte saga yaslanir,
   sonuncusu dil secicisinin solunda kalir. */
.ust .ust-bag{font-size:13px;color:#a79f91;text-decoration:none;
  padding:6px 13px;border:1px solid rgba(243,234,217,.22);
  border-radius:999px;white-space:nowrap}
/* Gruplar: biri gizli, oteki saga yaslanir.
   `[hidden]` ACIKCA kapatiliyor - `display:flex` onu EZIYOR
   ve kutu gizli sanilirken gorunur kaliyor (bu projede bir
   kez yasandi, panel sifre kutusu). */
.ust .ust-grup{display:flex;align-items:center;gap:10px;
  margin-left:auto}
.ust .ust-grup[hidden]{display:none}
.ust .ust-bag:first-of-type{margin-left:0}
/* Dugme olarak gelen "Cikis" baglanti gibi dursun. */
.ust button.ust-bag{background:transparent;font:inherit;
  font-size:13px;cursor:pointer}
.ust .ust-bag:hover{color:var(--vurgu);border-color:var(--vurgu)}
/* "Hesap ac" ANA EYLEM - dolu altin. */
.ust .ust-bag.vurgulu{background:var(--vurgu);color:#15161a;
  border-color:var(--vurgu);font-weight:600}
.ust .ust-bag.vurgulu:hover{background:var(--vurgu2);color:#15161a}

/* --- HAP DUGMELER ------------------------------------------------ */
.hap{display:inline-flex;align-items:center;gap:8px;border-radius:999px;
  padding:12px 24px;font:600 15px var(--govde);text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap}
.hap.dolu{background:var(--vurgu);color:#15161a}
.hap.dolu:hover{background:var(--vurgu2);color:#15161a}
.hap.cizgi{border-color:rgba(243,234,217,.32);color:var(--krem)}
.hap.cizgi:hover{border-color:var(--vurgu);color:var(--vurgu)}

/* --- KAHRAMAN ---------------------------------------------------- */
.kahraman{color:var(--krem);padding:60px 0 72px;
  background:
    radial-gradient(900px 420px at 88% -8%, #2e2a21 0%, transparent 62%),
    radial-gradient(700px 400px at 2% 108%, rgba(216,169,74,.17) 0%,
                    transparent 60%),
    var(--derin)}
.kahraman .sinir{display:grid;gap:44px;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.04fr)}
.kahraman h1{font-size:clamp(32px,4.5vw,51px)}
.kahraman h1 em{font-style:normal;color:var(--vurgu)}
.kahraman .giris{font-size:17.5px;color:#cfc8bb;max-width:46ch;
  margin:18px 0 26px}
.eylem{display:flex;gap:11px;flex-wrap:wrap}
.not{margin-top:16px;font-size:13px;color:#90897c}

.sayilar{display:flex;gap:30px;flex-wrap:wrap;margin-top:30px}
.sayilar b{display:block;font:600 27px/1.1 var(--baslik);
  color:var(--vurgu);font-variant-numeric:tabular-nums}
.sayilar span{font-size:12.5px;color:#90897c}

/* --- PROGRAM PENCERESI ------------------------------------------- */
.pencere{background:#1a1b1f;border:1px solid #32343a;border-radius:12px;
  overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.5)}
.pencere .baslik{display:flex;align-items:center;gap:9px;padding:9px 13px;
  background:#202126;border-bottom:1px solid #32343a;font-size:11.5px;
  color:var(--soluk);letter-spacing:.04em}
.pencere .baslik .nokta{width:8px;height:8px;border-radius:50%;
  background:var(--vurgu);flex:0 0 auto}
.pencere .baslik .dosya{color:var(--yazi);
  font-family:ui-monospace,Consolas,monospace}
.pencere .govde{display:grid;grid-template-columns:40px 1fr 166px}

/* Arac rafi - ikonlar CSS, ek dosya yuku yok. */
.raf{background:#202126;border-right:1px solid #32343a;padding:9px 0;
  display:flex;flex-direction:column;align-items:center;gap:7px}
.raf i{width:22px;height:22px;border-radius:5px;border:1.5px solid #4a4d53;
  display:block}
.raf i.secili{border-color:var(--vurgu);background:rgba(216,169,74,.15)}
.raf i.yuvarlak{border-radius:50%}
.raf i.ince{height:3px;border:0;border-radius:2px;background:#33353a;
  margin:7px 0;width:18px}

.gorunus{position:relative;min-height:262px;display:grid;place-items:center;
  padding:10px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/22px 22px,
    radial-gradient(closest-side,rgba(216,169,74,.1),transparent 70%),
    #141518}
.gorunus img{width:100%;max-width:268px;height:auto;display:block}
.gorunus .etiket{position:absolute;top:9px;left:11px;font-size:10.5px;
  color:var(--soluk);letter-spacing:.1em}

.olcum{background:#202126;border-left:1px solid #32343a;padding:11px 12px}
.olcum h4{margin:0 0 9px;font:700 10.5px var(--govde);letter-spacing:.12em;
  text-transform:uppercase;color:var(--soluk)}
.olcum dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:5px 8px;
  font-size:11.5px}
.olcum dt{color:var(--soluk);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.olcum dd{margin:0;text-align:right;color:var(--yazi);
  font-variant-numeric:tabular-nums}
.olcum .gecti{color:#7fc08a}

.komut{border-top:1px solid #32343a;background:#17181c;padding:8px 12px;
  font-family:ui-monospace,Consolas,monospace;font-size:11.5px;
  color:var(--soluk);line-height:1.6;overflow-wrap:anywhere}
.komut b{color:var(--vurgu);font-weight:400}

/* --- SISTEM TURU (koyu) ------------------------------------------ */
.tur{background:var(--zemin);padding:66px 0}
.tur h2{font-size:clamp(24px,3.1vw,33px);margin-bottom:10px}
.tur h2 em{font-style:normal;color:var(--vurgu)}
.tur .giris{margin:0 0 34px;font-size:16px;color:var(--soluk);max-width:62ch}

.satirlar{display:grid;gap:26px}
.tur-satir{display:grid;gap:26px;align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  background:var(--kart);border:1px solid var(--cizgi);border-radius:14px;
  padding:22px}
/* Ikinci satirda gorsel sagda degil SOLDA - sayfa tek ritimde
   akmasin, goz zikzak yapsin. */
.tur-satir:nth-child(even) .tur-yazi{order:2}
.tur-satir h3{font-size:19px;color:var(--vurgu2);margin-bottom:8px}
.tur-satir p{margin:0;font-size:14.5px;color:var(--soluk);line-height:1.7}
.tur-satir ul{margin:12px 0 0;padding-left:18px;font-size:13.5px;
  color:var(--soluk);line-height:1.8}

/* Dort gorunus - CAD'in klasik dizilimi, 2x2. */
.dortlu{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--cizgi);border:1px solid var(--cizgi);border-radius:10px;
  overflow:hidden}
.dortlu figure{margin:0;position:relative;background:#141518;
  display:grid;place-items:center;padding:8px;min-height:124px}
.dortlu img{width:100%;max-width:138px;height:auto;display:block}
.dortlu figcaption{position:absolute;top:6px;left:8px;font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--soluk)}

.tel{background:#141518;border:1px solid var(--cizgi);border-radius:10px;
  display:grid;place-items:center;padding:14px;
  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:20px 20px}
.tel img{width:100%;max-width:252px;height:auto;display:block}

/* --- ANTIKA BAND (acik) ------------------------------------------ */
.antika{background:
    radial-gradient(760px 360px at 12% 0%, #fbf3e3 0%, transparent 62%),
    linear-gradient(180deg,var(--parsomen) 0%,var(--parsomen2) 100%);
  color:var(--murekkep);padding:70px 0 76px;
  border-top:1px solid rgba(154,111,31,.3);
  border-bottom:1px solid rgba(154,111,31,.3)}
.antika .kas{color:var(--yanik-altin)}
.antika h2{font-size:clamp(25px,3.3vw,36px);color:var(--murekkep)}
.antika h2 em{font-style:normal;color:var(--yanik-altin)}
.antika .giris{margin:12px 0 34px;font-size:16.5px;
  color:var(--murekkep-soluk);max-width:60ch}

.taslar{display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(186px,1fr))}
.tas-kart{margin:0;background:rgba(255,253,247,.66);
  border:1px solid rgba(154,111,31,.28);border-radius:14px;
  padding:14px 12px 13px;text-align:center}
.tas-kart img{width:100%;height:auto;display:block;
  background:radial-gradient(closest-side,
      rgba(154,111,31,.14),transparent 72%)}
.tas-kart b{display:block;margin-top:8px;font:600 16px var(--baslik);
  color:var(--yanik-altin)}
.tas-kart span{display:block;font-size:12px;color:var(--murekkep-soluk);
  margin-top:2px}
.tas-kart code{display:block;margin-top:7px;font-size:10.5px;
  font-family:ui-monospace,Consolas,monospace;color:var(--murekkep-soluk);
  line-height:1.5;overflow-wrap:anywhere}

/* --- URUN SERIDI + OZELLIKLER (koyu) ----------------------------- */
.vitrinler{background:var(--zemin);padding:62px 0 8px}
.vitrinler h2{font-size:clamp(23px,3vw,32px);margin-bottom:10px}
.vitrinler h2 em{font-style:normal;color:var(--vurgu)}
.vitrin-alt{margin:0 0 28px;font-size:15.5px;color:var(--soluk);
  max-width:60ch}
.vitrin-izgara{display:grid;gap:17px;
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.vitrin{margin:0;text-align:center;background:var(--kart);
  border:1px solid var(--cizgi);border-radius:12px;padding:12px 10px 10px}
.vitrin img{width:100%;height:auto;display:block;
  background:radial-gradient(closest-side,
      rgba(216,169,74,.13),transparent 72%)}
.vitrin figcaption{margin-top:7px;font-size:10.5px;color:var(--soluk);
  line-height:1.5;overflow-wrap:anywhere}
.vitrin figcaption code{font-family:ui-monospace,Consolas,monospace}

.ozellikler{background:var(--zemin);padding:54px 0 70px}
.ozellikler .izgara{display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.oz{position:relative;overflow:hidden;background:var(--kart);
  border:1px solid var(--cizgi);border-radius:12px;padding:22px}
.oz::before{content:"";position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,var(--vurgu),transparent 72%)}
.oz b{display:block;font:600 17px var(--baslik);margin-bottom:8px;
  color:var(--vurgu2)}
.oz span{font-size:14px;color:var(--soluk);line-height:1.65}

/* --- ALT SERIT ---------------------------------------------------- */
.alt-serit{margin-top:auto;background:var(--derin);
  border-top:1px solid rgba(216,169,74,.2);padding:22px;text-align:center;
  font-size:12.5px;color:#90897c}
.alt-serit .ad{color:var(--vurgu);font-family:var(--baslik);
  letter-spacing:.16em;font-weight:600}

/* --- DAR EKRAN ---------------------------------------------------- */
@media (max-width:880px){
  .kahraman .sinir{grid-template-columns:1fr;gap:32px}
  .kahraman .pencere{order:2}
  .tur-satir{grid-template-columns:1fr}
  .tur-satir:nth-child(even) .tur-yazi{order:0}
}
@media (max-width:620px){
  /* Dil secici artik serit icinde akiyor - ona ayrilan 76
     piksellik sag pay KALKTI. Dugme ikinci satira duser. */
  .ust .sinir{flex-wrap:wrap;row-gap:9px;height:auto;
    padding-top:11px;padding-bottom:11px}
  .ust .ust-bag{margin-left:0;order:3}
  .ust .dil{margin-left:auto}
  /* Olcum paneli 166 piksel sabit; 360 piksellik telefonda
     gorunuse 150 piksel kalirdi - panel alta, raf disari. */
  .pencere .govde{grid-template-columns:1fr}
  .raf{display:none}
  .olcum{border-left:0;border-top:1px solid #32343a}
  .olcum dl{grid-template-columns:1fr auto 1fr auto}
  .sayilar{gap:20px}
}