/* Kendi sunucumuzda barındırılan yazı tipleri.
   Google Fonts'tan çekmiyoruz: Almanya'da uzaktan Google Fonts gömmek
   ziyaretçinin IP'sini ABD'ye aktardığı için DSGVO ihlali sayıldı
   (LG München I, 3 O 17493/20). Dosyalar burada, dışarı istek gitmiyor. */

@font-face{
  font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/archivo-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/archivo-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/archivo-latin-800-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ===============================================================
   Eg Logo Art — tasarım sistemi
   Renk dili: RAL endüstriyel (5010 Ensiyan Mavi + 1003 Sinyal Sarı)
   İmza: baskı provası köşe işaretleri (crop marks)
   =============================================================== */

:root{
  --ink:#101418;
  --ink-2:#1b2026;
  --gentian:#00558c;      /* RAL 5010 */
  --gentian-dk:#003c63;
  --gentian-15:rgba(0,85,140,.15);
  --altin:#c79528;        /* marka altini — logodan alindi */
  --altin-koyu:#a67a1c;   /* acik zeminde okunur ton (altin/beyaz 2.7:1 yetersiz) */
  --paper:#fff;
  --stock:#edebe6;
  --stock-2:#e2ded6;
  --graphite:#5d646c;
  --hat:rgba(16,20,24,.14);
  --hat-2:rgba(16,20,24,.08);

  --disp:'Archivo',system-ui,sans-serif;
  --govde:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --en:1280px;
  --bosluk:clamp(1.25rem,4vw,3rem);
  --r:2px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 1rem/1.65 var(--govde);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--gentian);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--gentian-dk)}
:focus-visible{outline:2px solid var(--gentian);outline-offset:3px}

.atla{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1rem;z-index:200}
.atla:focus{left:0}

/* --- tipografi ------------------------------------------------ */
.baslik-xl,.baslik-l,.baslik-m{
  font-family:var(--disp);font-weight:800;
  letter-spacing:-.03em;line-height:.98;margin:0;text-wrap:balance;
}
.baslik-xl{font-size:clamp(2.5rem,7.5vw,5.5rem);text-transform:uppercase}
.baslik-l {font-size:clamp(1.9rem,4.2vw,3.1rem)}
.baslik-m {font-size:clamp(1.3rem,2.2vw,1.75rem);letter-spacing:-.02em;line-height:1.15}

.etiket{
  font:500 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gentian);margin:0 0 1rem;display:flex;align-items:center;gap:.6rem;
}
.etiket::before{content:'';width:1.75rem;height:2px;background:var(--altin-koyu);flex:none}
.etiket--sade::before{display:none}

.giris{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--graphite);max-width:58ch;line-height:1.7}

/* --- düzen ----------------------------------------------------- */
.kesit{padding:clamp(3.5rem,8vw,7rem) var(--bosluk)}
.kesit__ic{max-width:var(--en);margin-inline:auto}
.kesit--dar .kesit__ic,.kesit--dar{max-width:var(--en);margin-inline:auto}
.kesit--stok{background:var(--stock)}
.kesit--ink{background:var(--ink);color:#fff}
.kesit--ink .giris{color:rgba(255,255,255,.72)}
.kesit--ink .etiket{color:var(--altin)}
.kesit--ink .etiket::before{background:var(--altin)}

.kesit__bas{
  display:flex;flex-wrap:wrap;gap:1.5rem;align-items:end;
  justify-content:space-between;margin-bottom:clamp(2rem,4vw,3.25rem);
}

/* --- üst bar --------------------------------------------------- */
.ust{position:sticky;top:0;z-index:100;background:var(--ink);color:#fff}
.ust__ic{
  max-width:var(--en);margin-inline:auto;padding:.7rem var(--bosluk);
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
}
.marka{display:block;flex:none;line-height:0;text-decoration:none}
.marka img{height:1.7rem;width:auto;display:block}
.marka--alt img{height:2.3rem}
@media (max-width:520px){.marka img{height:1.45rem}}

.gez{display:flex;gap:clamp(.6rem,1.6vw,1.4rem);margin-left:auto;flex-wrap:wrap}
.gez__l{
  font:500 .84rem/1 var(--govde);color:rgba(255,255,255,.78);
  text-decoration:none;padding:.5rem 0;position:relative;white-space:nowrap;
}
.gez__l:hover,.gez__l.is-aktif{color:#fff}
.gez__l.is-aktif::after{
  content:'';position:absolute;left:0;right:0;bottom:.15rem;height:2px;background:var(--altin);
}
.gez__l--kat{display:none}
@media (min-width:1180px){.gez__l--kat{display:block}}

.wa-dugme{
  display:inline-flex;align-items:center;gap:.5rem;flex:none;
  font:600 .84rem/1 var(--govde);text-decoration:none;
  color:#fff;border:1px solid rgba(255,255,255,.28);
  padding:.6rem .95rem;border-radius:var(--r);transition:background .18s,border-color .18s;
}
.wa-dugme:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);color:#fff}
.wa-dugme--dolu{background:var(--altin);color:var(--ink);border-color:var(--altin);font-weight:600}
.wa-dugme--dolu:hover{background:#ffd814;color:var(--ink);border-color:#ffd814}

.gez-ac{display:none;flex:none;background:none;border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r);width:2.5rem;height:2.5rem;padding:0;cursor:pointer}
.gez-ac span{display:block;width:16px;height:1.5px;background:#fff;margin:3.5px auto;transition:.2s}
.gez-ac[aria-expanded=true] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.gez-ac[aria-expanded=true] span:nth-child(2){opacity:0}
.gez-ac[aria-expanded=true] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

@media (max-width:860px){
  .gez-ac{display:block;order:3}
  .wa-dugme{order:2;padding:.55rem .7rem}
  .wa-dugme span{display:none}
  .gez{
    order:4;flex-basis:100%;flex-direction:column;gap:0;margin:0;
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .gez.is-acik{max-height:26rem;padding-top:.5rem}
  .gez__l{padding:.7rem 0;border-top:1px solid rgba(255,255,255,.1);font-size:.95rem}
  .gez__l--kat{display:block}
}

/* --- hero ------------------------------------------------------ */

/* --- İMZA: baskı köşe işaretleri --------------------------------- */
.prova{position:relative;display:block}
.prova::before,.prova::after{
  content:'';position:absolute;width:14px;height:14px;pointer-events:none;
  border-color:var(--altin-koyu);border-style:solid;transition:opacity .2s;
}
.banner .prova::before,.banner .prova::after,
.kesit--ink .prova::before,.kesit--ink .prova::after{border-color:var(--altin)}
.prova::before{top:-5px;left:-5px;border-width:1.5px 0 0 1.5px}
.prova::after{bottom:-5px;right:-5px;border-width:0 1.5px 1.5px 0}
.prova__ust,.prova__alt{position:absolute;width:14px;height:14px;pointer-events:none;
  border-color:var(--altin-koyu);border-style:solid}
.banner .prova__ust,.banner .prova__alt,
.kesit--ink .prova__ust,.kesit--ink .prova__alt{border-color:var(--altin)}
.prova__ust{top:-5px;right:-5px;border-width:1.5px 1.5px 0 0}
.prova__alt{bottom:-5px;left:-5px;border-width:0 0 1.5px 1.5px}


/* --- ürün ızgarası ----------------------------------------------- */
.urun-izgara{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));
}
.urun{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:.85rem}
.urun:hover{color:inherit}
.urun__cerceve{position:relative}
.urun__gor{aspect-ratio:1;overflow:hidden;background:var(--stock);border:1px solid var(--hat)}
.urun__gor img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.urun:hover .urun__gor img{transform:scale(1.05)}
.urun__cerceve .prova__ust,.urun__cerceve .prova__alt,
.urun__cerceve::before,.urun__cerceve::after{opacity:0}
.urun:hover .urun__cerceve::before,.urun:hover .urun__cerceve::after,
.urun:hover .prova__ust,.urun:hover .prova__alt{opacity:1}
.urun__ad{font:800 1.05rem/1.2 var(--disp);letter-spacing:-.025em;margin:0}
.urun__kod{
  font:400 .66rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);
  display:flex;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--hat);padding-top:.55rem;
}
.urun__kod b{font-weight:500;color:var(--gentian)}

/* --- ürün detay --------------------------------------------------- */
.detay{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr}
@media (min-width:920px){.detay{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}}

.galeri__ana{position:relative;margin-bottom:.9rem}
.galeri__ana img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--stock);border:1px solid var(--hat)}
.galeri__kucuk{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:.55rem}
.galeri__kucuk button{
  padding:0;border:1px solid var(--hat);background:var(--stock);cursor:pointer;
  aspect-ratio:1;overflow:hidden;transition:border-color .18s;
}
.galeri__kucuk button:hover{border-color:var(--gentian)}
.galeri__kucuk button[aria-current=true]{border-color:var(--gentian);border-width:2px}
.galeri__kucuk img{width:100%;height:100%;object-fit:cover}

.detay__yan{position:sticky;top:5.5rem}
@media (max-width:919px){.detay__yan{position:static}}
.detay__kutu{border:1px solid var(--hat);padding:clamp(1.25rem,3vw,1.9rem);background:var(--stock)}
.detay__satir{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;
  border-bottom:1px solid var(--hat-2);font-size:.88rem}
.detay__satir:last-child{border-bottom:0}
.detay__satir dt{color:var(--graphite);margin:0}
.detay__satir dd{margin:0;font-weight:600;text-align:right}
.detay__not{font:400 .78rem/1.55 var(--govde);color:var(--graphite);margin:.9rem 0 0}

.metin{max-width:66ch}
.metin h1{font:800 clamp(1.5rem,3vw,2.1rem)/1.1 var(--disp);letter-spacing:-.03em;margin:0 0 1.25rem}
.metin h2{font:800 clamp(1.15rem,2vw,1.4rem)/1.2 var(--disp);letter-spacing:-.02em;margin:2.25rem 0 .65rem}
.metin h3{font:600 1.02rem/1.3 var(--govde);margin:1.75rem 0 .5rem}
.metin p{margin:0 0 1.05rem;color:var(--ink-2)}
.metin ul,.metin ol{margin:0 0 1.05rem;padding-left:1.2rem;color:var(--ink-2)}
.metin li{margin-bottom:.45rem}
.metin strong{font-weight:600}
.metin :is(h1,h2,h3):first-child{margin-top:0}
.metin p:empty{display:none}

/* --- iz (breadcrumb) --------------------------------------------- */
.iz{font:400 .72rem/1 var(--mono);letter-spacing:.06em;color:var(--graphite);
  margin:0 0 1.25rem;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.iz a{color:var(--graphite);text-decoration:none}
.iz a:hover{color:var(--gentian);text-decoration:underline}
.iz span[aria-hidden]{color:var(--hat)}


/* --- iletişim ------------------------------------------------------- */
.ilet{display:grid;gap:clamp(2rem,5vw,3.5rem);grid-template-columns:1fr}
@media (min-width:860px){.ilet{grid-template-columns:1fr 1fr}}
.ilet__kart{border:1px solid var(--hat);padding:clamp(1.4rem,3vw,2rem)}
.ilet__kart + .ilet__kart{margin-top:1rem}
.ilet__bas{font:500 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gentian);margin:0 0 .7rem}
.ilet__deger{font:800 1.25rem/1.25 var(--disp);letter-spacing:-.025em;margin:0;word-break:break-word}
.ilet__deger a{text-decoration:none;color:inherit}
.ilet__deger a:hover{color:var(--gentian)}

.saatler{width:100%;border-collapse:collapse;font-size:.82rem;margin-top:.9rem}
.saatler th{text-align:left;font-weight:400;color:var(--graphite);padding:.28rem 0}
.saatler td{text-align:right;padding:.28rem 0;font-variant-numeric:tabular-nums}

/* --- alt (footer) ---------------------------------------------------- */
.alt{background:var(--ink);color:#fff;padding:clamp(3rem,6vw,4.5rem) var(--bosluk) 0;margin-top:auto}
.alt__ic{max-width:var(--en);margin-inline:auto;display:grid;gap:clamp(2rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
.alt__blok--marka{grid-column:span 1}
@media (min-width:900px){.alt__blok--marka{grid-column:span 1;max-width:30ch}}
.marka--alt{margin-bottom:1rem}
.alt__metin{font-size:.86rem;color:rgba(255,255,255,.6);margin:0 0 1.25rem;line-height:1.6}
.alt__bas{font:500 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--altin);margin:0 0 1rem}
.alt__liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.alt__liste a{font-size:.88rem;color:rgba(255,255,255,.72);text-decoration:none}
.alt__liste a:hover{color:#fff;text-decoration:underline}
.alt__adres{font-style:normal;font-size:.88rem;color:rgba(255,255,255,.72);margin:0 0 .9rem;line-height:1.6}
.alt__soluk{color:rgba(255,255,255,.42)}
.alt .saatler th{color:rgba(255,255,255,.5)}
.alt .saatler td{color:rgba(255,255,255,.75)}
.alt__son{
  max-width:var(--en);margin:clamp(2.5rem,5vw,3.5rem) auto 0;padding:1.4rem 0;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  font-size:.78rem;color:rgba(255,255,255,.5);
}
.alt__son p{margin:0}

/* --- yüzen whatsapp --------------------------------------------------- */
.wa-yuzen{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:90;
  width:3.35rem;height:3.35rem;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;
  box-shadow:0 6px 22px rgba(16,20,24,.28);transition:transform .2s;
}
.wa-yuzen:hover{transform:scale(1.07);color:#fff}

/* --- yardımcı --------------------------------------------------------- */
.bekleyen{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.5rem;list-style:none;padding:0}
.bekleyen li{
  font:400 .72rem/1 var(--mono);letter-spacing:.04em;color:var(--graphite);
  border:1px solid var(--hat);padding:.45rem .65rem;
}


/* --- ufak düzenlemeler ----------------------------------------------- */
.wa-dugme--tam{margin-top:1.1rem;width:100%;justify-content:center}
.metin--gecis{margin-top:clamp(2.5rem,6vw,4.5rem)}
.ilet__deger--kucuk{font-size:1.05rem;line-height:1.45}
.ilet__ek{font-size:.85rem;color:var(--graphite);margin:.5rem 0 0}
.ilet__kart--harita{padding:0;overflow:hidden;height:100%;min-height:420px}
.ilet__kart--harita iframe{width:100%;height:100%;min-height:420px;border:0;display:block}

/* Almanca başlıklar Türkçeden uzun — hero'da taşmayı önle */
html[lang=de] .banner__baslik{font-size:clamp(2.4rem,7.6vw,5.6rem)}

/* --- harita: iki tık çözümü (tıklanana kadar dışarı istek gitmez) ------ */
.harita{position:relative;width:100%;height:100%;min-height:420px;background:var(--stock-2)}
.harita iframe{width:100%;height:100%;min-height:420px;border:0;display:block}
.harita__perde{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.7rem;text-align:center;
  padding:clamp(1.25rem,4vw,2.25rem);background:var(--stock);
}
.harita__bas{font:800 1.15rem/1.2 var(--disp);letter-spacing:-.02em;margin:0}
.harita__not{font-size:.82rem;color:var(--graphite);margin:0;max-width:38ch;line-height:1.55}
.harita__link{font-size:.8rem;color:var(--gentian)}
.harita.is-yuklendi .harita__perde{display:none}

/* --- doldurulmayı bekleyen yer tutucu (Impressum) --------------------- */
.doldur{
  background:#ffe8e8;color:#a4161a;border:1px dashed #a4161a;
  padding:.1em .4em;font:500 .9em/1.4 var(--mono);border-radius:2px;
}
.doldur::before{content:'DOLDUR: ';font-size:.8em;letter-spacing:.08em}

/* ===============================================================
   ANA BANNER
   Hareketli zemin + karşılıklı kayan fotoğraf sütunları + kayan şerit.
   Bağımlılık yok: yalnızca CSS transform, JavaScript kullanmıyor.
   =============================================================== */

.banner{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}

/* --- hareketli zemin ------------------------------------------------- */
.banner__zemin{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.banner__isik{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;
  will-change:transform;
}
.banner__isik--1{
  width:46vw;height:46vw;min-width:340px;min-height:340px;
  background:radial-gradient(circle,rgba(199,149,40,.62),transparent 68%);
  top:-14%;left:-8%;animation:suzul-1 26s ease-in-out infinite alternate;
}
.banner__isik--2{
  width:38vw;height:38vw;min-width:280px;min-height:280px;
  background:radial-gradient(circle,rgba(0,85,140,.62),transparent 68%);
  bottom:-18%;left:34%;animation:suzul-2 34s ease-in-out infinite alternate;
}
@keyframes suzul-1{from{transform:translate3d(0,0,0) scale(1)}
                   to{transform:translate3d(16vw,10vh,0) scale(1.22)}}
@keyframes suzul-2{from{transform:translate3d(0,0,0) scale(1.1)}
                   to{transform:translate3d(-14vw,-9vh,0) scale(.9)}}

.banner__izgara{
  position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 30% 40%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 30% 40%,#000 30%,transparent 78%);
}

/* --- yerleşim --------------------------------------------------------- */
.banner__ic{
  position:relative;z-index:1;max-width:var(--en);margin-inline:auto;
  padding:clamp(3rem,7vw,5.5rem) var(--bosluk);
  display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1fr;
}
@media (min-width:940px){.banner__ic{grid-template-columns:1.02fr .98fr}}

.banner__baslik{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.5rem,7.4vw,5.6rem);line-height:.92;letter-spacing:-.045em;
  margin:0 0 1.5rem;text-wrap:balance;
}
.banner__baslik em{font-style:normal;color:var(--altin);display:block}
.banner__giris{font-size:clamp(1rem,1.6vw,1.2rem);color:rgba(255,255,255,.74);max-width:46ch;margin:0 0 2rem}
.banner__dug{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2.5rem}
.banner__sayi{display:flex;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);padding-top:1.25rem}
.banner__sayi div{padding-right:clamp(1.5rem,4vw,3rem)}
.banner__sayi b{display:block;font:800 1.6rem/1 var(--disp);letter-spacing:-.03em}
.banner__sayi span{font:400 .68rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}

/* --- kayan fotoğraf sütunları ----------------------------------------- */
.banner__galeri{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.75rem,1.6vw,1.15rem);
  height:clamp(360px,52vw,560px);
  mask-image:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent);
}
.sutun{overflow:hidden}
.sutun__ic{
  display:flex;flex-direction:column;gap:clamp(.75rem,1.6vw,1.15rem);
  will-change:transform;
}
.sutun--yukari .sutun__ic{animation:suz-yukari 46s linear infinite}
.sutun--asagi  .sutun__ic{animation:suz-asagi  56s linear infinite}
/* iki tur çizildiği için -50% tam bir tur eder, dikiş görünmez */
@keyframes suz-yukari{from{transform:translateY(0)}      to{transform:translateY(-50%)}}
@keyframes suz-asagi {from{transform:translateY(-50%)}   to{transform:translateY(0)}}
.banner__galeri:hover .sutun__ic{animation-play-state:paused}

.kare{
  position:relative;flex:none;aspect-ratio:1;overflow:hidden;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
}
.kare img{width:100%;height:100%;object-fit:cover;display:block}
.kare .prova__ust,.kare .prova__alt,.kare::before,.kare::after{border-color:var(--altin);opacity:.85}
.kare__bos{
  position:absolute;inset:0;display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 12px,transparent 12px 24px);
}
.kare__bos img{width:46%;height:auto;object-fit:contain;opacity:.45}

@media (max-width:939px){
  .banner__galeri{height:clamp(280px,58vw,380px)}
}
@media (max-width:520px){
  .banner__galeri{grid-template-columns:repeat(2,minmax(0,1fr));height:270px}
}

/* --- banner içindeki kayan şerit --------------------------------------- */
.banner__serit{
  position:relative;z-index:1;background:var(--altin);color:var(--ink);
  overflow:hidden;padding:.7rem 0;border-top:1px solid rgba(16,20,24,.22);
}
.banner__serit-ic{display:flex;gap:2.5rem;width:max-content;animation:kay 46s linear infinite}
.banner__serit span{
  font:500 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;display:flex;align-items:center;gap:2.5rem;
}
.banner__serit span::after{content:'';width:5px;height:5px;background:var(--ink);opacity:.55;flex:none}
/* altın zeminde ince yazı soluk kalıyor — bir kademe kalınlaştır */
.banner__serit span{font-weight:600}
@keyframes kay{from{transform:translateX(0)} to{transform:translateX(-33.333%)}}

/* --- hareket azaltma tercihi ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .banner__isik,.sutun__ic,.banner__serit-ic{animation:none}
  .banner__isik--1{transform:translate3d(8vw,5vh,0)}
}

/* ===============================================================
   HOVER KARTLARI — kategori ızgarası
   Koyu yuvarlak kart, üstte görsel, altta başlık + açıklama.
   Üzerine gelince: kart yükselir, görsel yaklaşır, perde açılır,
   altın çizgi büyür, ok kayar. Tamamı CSS; JavaScript kullanmıyor.
   =============================================================== */

.kartlar{
  display:grid;gap:clamp(1rem,1.8vw,1.4rem);
  grid-template-columns:1fr;                    /* telefon: tek sütun */
}
@media (min-width:600px){ .kartlar{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:960px){ .kartlar{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* üçlü ızgara: 3 · 6 · 9 — satırlar tam dolar, boşluk kalmaz */
.kartlar--kucuk{grid-template-columns:repeat(auto-fill,minmax(min(100%,232px),1fr))}

.kart{
  position:relative;display:flex;flex-direction:column;
  background:var(--ink-2);color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:.65rem;
  isolation:isolate;overflow:hidden;
  transition:transform .42s cubic-bezier(.2,.7,.25,1),
             box-shadow .42s cubic-bezier(.2,.7,.25,1),
             border-color .3s ease;
  will-change:transform;
}
/* kartın arkasından yükselen altın parıltı */
.kart::before{
  content:'';position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
  background:linear-gradient(160deg,rgba(199,149,40,.55),rgba(199,149,40,0) 46%);
  opacity:0;transition:opacity .42s ease;
}
.kart:hover,.kart:focus-visible{
  transform:translateY(-8px);color:#fff;
  border-color:rgba(199,149,40,.42);
  box-shadow:0 20px 44px -18px rgba(16,20,24,.62);
}
.kart:hover::before,.kart:focus-visible::before{opacity:1}

/* --- görsel ------------------------------------------------------- */
.kart__gorsel{
  position:relative;border-radius:13px;overflow:hidden;
  aspect-ratio:4/3;background:var(--stock-2);
}
/* görsel henüz yoksa: desenli alan + soluk marka yayı */
.kart__gorsel--bos{
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 14px,transparent 14px 28px),
             rgba(255,255,255,.04);
  display:grid;place-items:center;
}
.kart__gorsel--bos img{width:38%;height:auto;object-fit:contain;opacity:.4}
.kart__gorsel img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .62s cubic-bezier(.2,.7,.25,1),filter .42s ease;
}
.kart:hover .kart__gorsel img{transform:scale(1.07)}

/* alttan açılan koyu perde — başlık okunurluğunu korur */
.kart__perde{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(16,20,24,.72),rgba(16,20,24,0) 52%);
  opacity:.55;transition:opacity .42s ease;
}
.kart:hover .kart__perde{opacity:.9}

/* adet rozeti — normalde saklı, hover'da aşağıdan gelir */
.kart__rozet{
  position:absolute;left:.7rem;bottom:.7rem;
  font:500 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  background:var(--altin);color:var(--ink);padding:.42rem .6rem;border-radius:99px;
  opacity:0;transform:translateY(10px);
  transition:opacity .34s ease .04s,transform .42s cubic-bezier(.2,.7,.25,1) .04s;
}
.kart:hover .kart__rozet,.kart:focus-visible .kart__rozet{opacity:1;transform:translateY(0)}

/* --- gövde -------------------------------------------------------- */
.kart__govde{position:relative;padding:1.05rem .55rem .5rem}
.kart__ad{
  font:800 1.14rem/1.18 var(--disp);letter-spacing:-.025em;margin:0 0 .35rem;
  padding-right:1.8rem;
}
/* başlığın altında büyüyen altın çizgi */
.kart__ad::after{
  content:'';display:block;width:1.6rem;height:2px;background:var(--altin);
  margin-top:.55rem;transform-origin:left;transform:scaleX(1);
  transition:transform .42s cubic-bezier(.2,.7,.25,1);
}
.kart:hover .kart__ad::after{transform:scaleX(2.6)}
.kart__tanim{font-size:.86rem;line-height:1.55;color:rgba(255,255,255,.62);margin:.55rem 0 0}

.kart__ok{
  position:absolute;top:1.05rem;right:.4rem;color:var(--altin);
  display:grid;place-items:center;
  opacity:0;transform:translateX(-7px);
  transition:opacity .3s ease,transform .42s cubic-bezier(.2,.7,.25,1);
}
.kart:hover .kart__ok,.kart:focus-visible .kart__ok{opacity:1;transform:translateX(0)}

/* dokunmatik ekranda hover yok — kalıcı göster */
@media (hover:none){
  .kart__rozet,.kart__ok{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .kart,.kart__gorsel img,.kart__rozet,.kart__ok,.kart__ad::after{transition:none}
  .kart:hover{transform:none}
}

/* --- "üç adım" blokları ------------------------------------------- */
.adimlar{
  display:grid;gap:1px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.16);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr));
}
.adim{background:var(--ink);padding:1.15rem 1.25rem 1.35rem}
.adim__no{
  font:500 .66rem/1 var(--mono);letter-spacing:.12em;color:var(--altin);
  display:flex;align-items:center;gap:.45rem;margin:0 0 .4rem;
}
.adim__no::before{content:'';width:.55rem;height:.55rem;background:var(--altin);flex:none}
.adim__bas{font:800 1.12rem/1.15 var(--disp);letter-spacing:-.025em;margin:0 0 .4rem;color:#fff}
.adim__metin{font-size:.88rem;color:rgba(255,255,255,.62);margin:0}

/* --- henüz fotoğrafı olmayan kategori ---------------------------------- */
.bekliyor{
  border:1px dashed var(--hat);padding:clamp(1.75rem,4vw,2.75rem);
  background:repeating-linear-gradient(135deg,rgba(16,20,24,.028) 0 14px,transparent 14px 28px);
  max-width:62ch;
}
.bekliyor__bas{
  font:500 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--altin-koyu);margin:0 0 .8rem;
}
.bekliyor__metin{font-size:.95rem;line-height:1.7;color:var(--ink-2);margin:0 0 1.4rem}
.kart__rozet--bekliyor{background:rgba(255,255,255,.9);color:var(--ink)}