/* ============================================================
   Pist Studio — tasarım sistemi
   Renk rampası eski Pist paletinden türetildi.
   Kural: arayüz tek renk (amber), içerik çok renk.
   ============================================================ */

:root{
  /* derinlik rampası */
  --g0:#0B0616;   /* uzay — sayfa zemini */
  --g1:#150A28;   /* zemin — kart, bölüm */
  --g2:#241040;   /* yüzey — yükseltilmiş blok */
  --g3:#3E1E53;   /* kenarlık, seçili durum */
  --g4:#571055;   /* en sıcak katman — Sound */

  /* metin */
  --tx:#F2E9F6;
  --tx-soft:#CFC6E4;   /* gövde metni — dim fazla sönük kalıyordu */
  --tx-dim:#A99BC4;
  --tx-faint:#6E6087;

  /* tek etkileşim vurgusu */
  --acc:#FFAA05;
  --acc-ink:#2A1600;

  /* içerik skalası — yalnızca içeriği ayırmak için */
  --c-yellow:#FFD62C;
  --c-lilac:#E4CDF1;
  --c-green:#9CE085;
  --c-amber:#FFAA05;
  --c-orange:#FF7816;
  --c-coral:#FD605B;
  --c-lavender:#A684BD;

  /* çizgi */
  --line:rgba(214,190,245,.13);
  --line-soft:rgba(214,190,245,.07);

  /* tipografi */
  --disp:"Archivo",system-ui,-apple-system,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tech:"Oxanium",ui-monospace,"SF Mono",Menlo,monospace;

  /* ölçü */
  --maxw:1120px;
  --gut:clamp(20px,5vw,60px);
}

*,*::before,*::after{box-sizing:border-box}

html{
  color-scheme:dark;
  /* Lastik bant esnemesi kapalı: sayfa sonunda/başında zıplama olmuyor,
     sabit konumlu öğeler (üst çubuk, kalkış sahnesi) yerinden oynamıyor. */
  overscroll-behavior-y:none;
}

body{
  margin:0;
  background:var(--g0);
  color:var(--tx);
  font-family:var(--body);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg,video{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* ---------------- tipografi ---------------- */

h1,h2,h3{
  font-family:var(--disp);
  font-stretch:110%;
  font-weight:400;
  letter-spacing:-.032em;
  line-height:1.04;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(38px,7vw,80px);line-height:.99;letter-spacing:-.038em}
h2{font-size:clamp(28px,4.6vw,48px)}
h3{font-size:clamp(20px,2.6vw,27px);font-weight:400;letter-spacing:-.026em}

p{margin:0}

.lede{font-size:clamp(15px,1.8vw,18px);color:var(--tx-soft);max-width:46ch}
.lede strong{color:var(--tx);font-weight:500}

/* Oxanium'un rolü: teknik etiket, sayı, meta — gövde metni değil */
.tech{
  font-family:var(--tech);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tx-faint);
  font-variant-numeric:tabular-nums;
}
.eyebrow{
  font-family:var(--tech);
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc);
  display:flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6;flex:none}
/* Etiket ile başlık arasına nefes. .section-head zaten gap:16px veriyor,
   burada üstüne ekleniyor; tek başına duran etiketler home.css'te. */
.section-head .eyebrow{margin-bottom:clamp(6px,1vw,14px)}

a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* ---------------- marka kilidi ---------------- */

.lockup{display:flex;align-items:center;gap:11px;text-decoration:none}
.lockup .mark{width:16px;height:23px;flex:none}
.lockup .wm{
  font-family:var(--disp);font-stretch:110%;font-weight:400;
  font-size:18px;letter-spacing:-.028em;color:var(--tx);
}

/* ---------------- düğmeler ---------------- */

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 21px;
  font-family:var(--body);font-size:13.5px;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:opacity .18s ease;
}
.btn:hover{opacity:.86}
.btn-p{background:var(--acc);color:var(--acc-ink)}
.btn-s{border-color:var(--line);color:var(--tx);background:transparent}

/* ---------------- üst çubuk ---------------- */

.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(11,6,22,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
/* Üst çubuk tam genişliğe yayılır: logo en solda, dil seçici en sağda.
   İçerik sütunu (--maxw) okunabilirlik için dar kalır ama çubuk kalmaz —
   geniş ekranda ortada toplanmış görünüyordu. */
.topbar .inner{
  display:flex;align-items:center;gap:14px;height:62px;
  max-width:none;
}
/* Masaüstü: menü sağa yaslı tek satır, hamburger gizli. */
.menu{display:flex;align-items:center;gap:14px;margin-left:auto}
.menu-btn{display:none}

.topbar nav{display:flex;gap:2px;flex-wrap:wrap}
.topbar nav a{
  font-family:var(--tech);font-size:11px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--tx-dim);text-decoration:none;
  padding:7px 12px;border:1px solid transparent;
}
.topbar nav a:hover{color:var(--tx)}
.topbar nav a[aria-current="page"]{color:var(--acc);border-color:rgba(255,170,5,.34)}

/* Dil seçici: vurgu rengi değil, sakin bir yüzey.
   Amber tek arayüz vurgusu olarak butonlara ve aktif nav'a ayrıldı. */
.lang{display:flex;border:1px solid var(--line);flex:none}
.lang a{
  font-family:var(--tech);font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-faint);text-decoration:none;padding:6px 10px;
}
.lang a:hover{color:var(--tx-dim)}
.lang a[aria-current="true"]{background:rgba(214,190,245,.12);color:var(--tx)}

/* ---- mobil: hamburger ---- */
@media(max-width:720px){
  .menu-btn{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:auto;width:40px;height:40px;flex:none;
    background:none;border:1px solid var(--line);cursor:pointer;
    padding:0 10px;
  }
  .menu-btn .cizgi{
    display:block;width:100%;height:1.5px;background:var(--tx-dim);
    transition:transform .22s,opacity .22s;
  }
  .menu-btn[aria-expanded="true"] .cizgi:first-child{transform:translateY(3.25px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] .cizgi:last-child{transform:translateY(-3.25px) rotate(-45deg)}

  /* Panel üst çubuğun altına açılır. Ana sayfada çubuk şeffaf olduğu için
     panel kendi zeminini taşır. */
  .menu{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;margin-left:0;
    background:rgba(11,6,22,.97);
    backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:8px var(--gut) 16px;
  }
  .menu.acik{display:flex}
  .topbar nav{flex-direction:column;gap:0}
  .topbar nav a{padding:13px 0;font-size:12px;border:none;border-bottom:1px solid var(--line-soft)}
  .topbar nav a[aria-current="page"]{border-color:transparent;border-bottom:1px solid var(--line-soft)}
  /* Dil seçici menünün içinde, en altta */
  .lang{margin-top:16px;align-self:flex-start}
  .lang a{padding:9px 16px;font-size:11px}
}

/* ---------------- bölümler ---------------- */

.section{padding-block:clamp(48px,8vw,104px);border-top:1px solid var(--line)}
.section-head{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(30px,4.5vw,48px)}

/* satır listesi — kart değil satır */
.rows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 22px;
  padding:20px 0 20px 18px;border-bottom:1px solid var(--line);
  position:relative;text-decoration:none;color:inherit;
}
.row::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:2px;background:var(--hue,var(--acc))}
.row:hover{background:rgba(36,16,64,.34)}
.row .rk{
  grid-column:1;font-family:var(--tech);font-size:9.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--hue,var(--acc));
}
.row .rt{grid-column:1;font-family:var(--disp);font-stretch:110%;font-weight:400;font-size:clamp(18px,2.2vw,23px);letter-spacing:-.026em}
.row .rd{grid-column:1;font-size:14px;color:var(--tx-soft);max-width:58ch;line-height:1.55}
.row .rs{
  grid-column:2;grid-row:1/3;align-self:start;
  font-family:var(--tech);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-faint);white-space:nowrap;font-variant-numeric:tabular-nums;
}
@media(max-width:600px){
  .row{grid-template-columns:minmax(0,1fr)}
  .row .rs{grid-column:1;grid-row:auto;margin-top:4px}
}

/* ---------------- ürün kartları ---------------- */

.urunler{
  display:grid;gap:clamp(18px,2.6vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
.urun{
  display:flex;flex-direction:column;
  border:1px solid var(--line);background:var(--g1);
  text-decoration:none;color:inherit;
  transition:border-color .25s,background .25s,transform .25s;
}
a.urun:hover{border-color:var(--hue,var(--acc));background:var(--g2);transform:translateY(-3px)}
.urun .gorsel{
  width:100%;aspect-ratio:8/5;object-fit:cover;display:block;
  border-bottom:1px solid var(--line);
}
.urun .ic{display:flex;flex-direction:column;gap:11px;padding:clamp(20px,2.4vw,28px);flex:1}
.urun .ust{display:flex;align-items:center;justify-content:space-between;gap:14px}
.urun .kat{
  font-family:var(--tech);font-size:10px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--hue,var(--acc));
}
.urun .durum{
  font-family:var(--tech);font-size:9.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-faint);
  border:1px solid var(--line);padding:4px 9px;flex:none;
}
.urun h3{font-size:clamp(21px,2.4vw,26px);margin:0}
.urun p{font-size:14px;color:var(--tx-soft);line-height:1.55;margin:0}
.urun .git{
  margin-top:auto;padding-top:14px;
  font-family:var(--tech);font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--hue,var(--acc));
}

/* ---------------- katalog (Sound) ---------------- */

.katalog{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.katalog .satir{
  /* Sütunlar açıkça yerleştiriliyor — auto bırakılınca yıl sütunu
     içeriğinden dar kalıp metni sıkıştırıyordu. */
  display:grid;grid-template-columns:34px minmax(0,1fr) 46px 46px;
  align-items:center;gap:4px 18px;
  padding:13px 0;border-bottom:1px solid var(--line-soft);
  text-decoration:none;color:inherit;
  transition:background .2s,padding-left .2s;
}
a.katalog-satir:hover{background:rgba(36,16,64,.4);padding-left:10px}
.katalog .no{
  grid-column:1;grid-row:1/3;
  font-family:var(--tech);font-size:11px;color:var(--tx-faint);
  font-variant-numeric:tabular-nums;
}
.katalog .ad{grid-column:2;grid-row:1;font-size:15.5px;color:var(--tx);line-height:1.35}
.katalog .sanatci{
  grid-column:2;grid-row:2;font-size:13px;color:var(--tx-dim);line-height:1.4;
}
.katalog .yil{
  grid-column:3;grid-row:1/3;
  font-family:var(--tech);font-size:11px;color:var(--tx-faint);
  font-variant-numeric:tabular-nums;
}
.katalog .sure{
  grid-column:4;grid-row:1/3;
  font-family:var(--tech);font-size:11px;color:var(--tx-faint);
  font-variant-numeric:tabular-nums;text-align:right;
}
@media(max-width:560px){
  .katalog .satir{grid-template-columns:28px minmax(0,1fr) 44px;gap:3px 12px}
  .katalog .sure{grid-column:3}
  .katalog .yil{display:none}
}
.katalog-bos{
  border:1px solid var(--line);background:var(--g1);
  padding:clamp(22px,3vw,32px);
}
.katalog-bos p{font-size:14px;color:var(--tx-soft);line-height:1.6;margin:0 0 16px;max-width:52ch}

/* ---------------- hizmet kartları (Sound) ---------------- */

.hizmetler{
  display:grid;gap:clamp(16px,2.4vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.hizmet{
  border:1px solid var(--line);background:var(--g1);
  padding:clamp(22px,2.6vw,30px);
  display:flex;flex-direction:column;gap:12px;
  border-top:2px solid var(--hue,var(--acc));
}
.hizmet .no{
  font-family:var(--tech);font-size:10px;font-weight:600;letter-spacing:.14em;
  color:var(--hue,var(--acc));
}
.hizmet h3{font-size:clamp(18px,2vw,22px);margin:0}
.hizmet p{font-size:13.5px;color:var(--tx-soft);line-height:1.55;margin:0}

/* ---------------- alt bilgi ---------------- */

.footer{border-top:1px solid var(--line);padding-block:clamp(40px,6vw,68px) 40px}
.footer .cols{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
@media(min-width:760px){.footer .cols{grid-template-columns:1.4fr 1fr 1fr}}
.footer h4{
  font-family:var(--tech);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-faint);margin:0 0 14px;
}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.footer a{color:var(--tx-dim);text-decoration:none;font-size:14px}
.footer a:hover{color:var(--acc)}
.footer .slogan{font-size:14px;color:var(--tx-dim);max-width:34ch;margin-top:12px}
.footer .base{
  display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center;
  margin-top:clamp(34px,5vw,52px);padding-top:22px;border-top:1px solid var(--line-soft);
}
.footer .base span{font-family:var(--tech);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-faint)}

/* ---------------- erişilebilirlik ---------------- */

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--acc);color:var(--acc-ink);padding:10px 16px;
  font-size:13px;font-weight:600;text-decoration:none;
}
.skip:focus{left:12px;top:12px}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* --- iş kartları: blueprint çizimli ve tıklanabilir ---
   Not: çizimlerin rengi SVG dosyalarına gömülü. <img> ile yüklenen SVG
   sayfadan currentColor miras alamıyor, izole render ediliyor. */
.hizmet-bag{text-decoration:none;color:inherit;transition:background .18s ease}
.hizmet-bag:hover{background:var(--g2)}
.hizmet-cizim{
  display:block;margin:-4px -4px 6px;
  border:1px solid var(--line-soft);background:rgba(11,6,22,.5);
  aspect-ratio:16/9;overflow:hidden;
}
.hizmet-cizim img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.hizmet-bag:hover .hizmet-cizim img{opacity:1}
.hizmet-git{
  font-family:var(--tech);font-size:10px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tx-faint);
  margin-top:auto;padding-top:8px;
}
.hizmet-bag:hover .hizmet-git{color:var(--acc)}