/* ============================================================
   3G GROUP AMBALAJ — stil
   Renk ve tipografi katalogdan (3G-26.pdf) türetildi.
   ============================================================ */

:root{
  --lacivert:#161E3B;
  --lacivert-koyu:#0F1529;
  --lacivert-acik:#243059;
  --krem:#F7F5F0;
  --panel:#EDEFF4;
  --mavi:#2450E8;
  --mavi-koyu:#1B3EBF;
  --yesil:#25A85B;
  --metin:#1B2340;
  --metin-soluk:#5A6480;
  --cizgi:#E2E5EC;
  --cizgi-koyu:rgba(255,255,255,.14);

  --kap:1220px;
  --r:16px;
  --r-b:24px;
  --gecis:.45s cubic-bezier(.22,.8,.28,1);

  --bas:"Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --govde:"Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--krem); color:var(--metin);
  font-family:var(--govde); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}

h1,h2,h3,h4{font-family:var(--bas); font-weight:800; line-height:1.08; letter-spacing:-.025em; margin:0}
h1{font-size:clamp(2.6rem,7vw,5.1rem)}
h2{font-size:clamp(1.9rem,3.8vw,3.1rem)}
h3{font-size:1.22rem; letter-spacing:-.02em}
h4{font-size:1rem; letter-spacing:-.01em; font-weight:800}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

.kap{width:100%; max-width:var(--kap); margin-inline:auto; padding-inline:24px}
.bolum{padding:clamp(72px,9vw,132px) 0; position:relative}

.atla{position:absolute; left:-9999px; top:0; background:var(--mavi); color:#fff; padding:12px 20px; z-index:200; border-radius:0 0 10px 0}
.atla:focus{left:0}

/* ---------- ortak parçalar ---------- */
.etiket{
  font-family:var(--bas); font-weight:700; font-size:.74rem; letter-spacing:.19em;
  text-transform:uppercase; color:rgba(255,255,255,.62); margin:0 0 20px;
}
.etiket.koyu{color:var(--mavi)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--bas); font-weight:700; font-size:.95rem; letter-spacing:-.01em;
  padding:13px 26px; border-radius:100px; transition:transform .2s, background .25s, box-shadow .25s, color .25s;
  white-space:nowrap;
}
.btn-b{padding:16px 34px; font-size:1rem}
.btn-mavi{background:var(--mavi); color:#fff; box-shadow:0 10px 26px -12px rgba(36,80,232,.85)}
.btn-mavi:hover{background:var(--mavi-koyu); transform:translateY(-2px)}
.btn-sade{background:var(--lacivert); color:#fff}
.btn-sade:hover{background:var(--lacivert-koyu); transform:translateY(-2px)}
.btn-hayalet{background:rgba(255,255,255,.09); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.btn-hayalet:hover{background:rgba(255,255,255,.16); transform:translateY(-2px)}

.hero-doku{
  position:absolute; inset:0; background:var(--lacivert) url("img/doku.jpg?v=202609031336") center/620px repeat;
  opacity:1; z-index:0;
}
.hero-doku::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,21,41,.28), rgba(15,21,41,.62))}

.bolum-bas{max-width:720px; margin-bottom:52px}
.bolum-bas.ortala{margin-inline:auto; text-align:center}
.bolum-alt{color:var(--metin-soluk); font-size:1.06rem; margin-top:18px}

/* ---------- header (açık tema — hero beyaz) ---------- */
.ust{position:fixed; top:0; left:0; right:0; z-index:100; transition:background .35s, box-shadow .35s, padding .35s; padding:14px 0}
.ust-ic{display:flex; align-items:center; justify-content:space-between; gap:24px}
.ust.kayan{background:rgba(255,255,255,.92); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--cizgi); padding:8px 0}

.marka{display:flex; align-items:center; gap:12px}
.marka-amblem{width:40px; height:auto; flex:none}
.marka-yazi{display:flex; flex-direction:column; line-height:1.15}
.marka-yazi strong{font-family:var(--bas); font-weight:800; font-size:1.05rem; letter-spacing:.02em; color:var(--lacivert)}
.marka-yazi em{font-style:normal; font-size:.66rem; letter-spacing:.09em; color:var(--metin-soluk); text-transform:uppercase; white-space:nowrap}

.menu{display:flex; align-items:center; gap:30px}
.menu a{font-size:.94rem; font-weight:500; color:var(--metin-soluk); transition:color .2s; position:relative}
.menu a:not(.btn):hover{color:var(--lacivert)}
.menu a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background:var(--mavi); transition:width .28s;
}
.menu a:not(.btn):hover::after{width:100%}
.menu-cta{color:#fff !important; margin-left:6px}

.menu-ac{display:none; width:44px; height:44px; flex-direction:column; justify-content:center; align-items:center; gap:5px}
.menu-ac span{width:22px; height:2px; background:var(--lacivert); border-radius:2px; transition:transform .3s, opacity .25s}
.menu-ac[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-ac[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-ac[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero (beyaz zemin, iki sütun) ---------- */
.hero{position:relative; background:#fff; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:130px 0 0; overflow:hidden}
.hero-ic{
  position:relative; z-index:1; padding-bottom:96px;
  display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(24px,4vw,56px); align-items:center;
}

.hero h1{color:var(--lacivert); margin-bottom:18px}
.hero h1 .nokta{color:var(--mavi)}
.hero-slogan{
  font-family:var(--bas); font-weight:700; letter-spacing:-.015em;
  font-size:clamp(1.15rem,2vw,1.6rem); color:var(--metin-soluk);
  margin-bottom:38px;
}
.hero-btn{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:clamp(44px,6vw,86px)}
.hero-btn svg{width:19px; height:19px; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s}
.hero-btn .btn:hover svg{transform:translateX(4px)}

/* alt bilgi paneli — referanstaki yuvarlatılmış blok */
.hero-panel{
  position:relative; background:var(--krem); border:1px solid var(--cizgi);
  border-radius:22px; padding:clamp(24px,2.6vw,32px);
  max-width:520px;
}
/* kenarda dolaşan mavi çizgi — buton rengiyle aynı */
.panel-cizgi{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none; z-index:1;
}
.panel-cizgi rect{
  width:100%; height:100%; fill:none;
  stroke:var(--mavi); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:20 80;                 /* pathLength=100 → boyuttan bağımsız */
  animation:cizgiAk 5.5s linear infinite;
}
@keyframes cizgiAk{to{stroke-dashoffset:-100}}
.hero-alt{color:var(--metin-soluk); font-size:1.04rem; margin-bottom:24px}
/* Inter'in yüklü en kalın kesimi 600 — 700 sahte kalın üretirdi */
.hero-alt strong{font-weight:600}
.hero-kanit{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.kanit-rozet{
  font-family:var(--bas); font-weight:800; font-size:.95rem; color:#fff;
  background:var(--lacivert); border-radius:100px; padding:8px 18px; flex:none;
}
.hero-kanit p{font-size:.92rem; color:var(--metin-soluk); margin:0; flex:1; min-width:200px}
.hero-kanit i{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--mavi); margin-right:7px; vertical-align:middle}

/* sağ sütun: ızgara deseni + ürünler */
.hero-sag{position:relative; min-height:clamp(380px,46vw,560px); display:grid; place-items:center}
.hero-izgara{
  position:absolute; top:-8%; bottom:-8%; left:-8%; right:-50vw;
  background:url("img/izgara.png?v=202609031336") left top / 92px 92px repeat;
  opacity:.5;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%);
  mask-image:linear-gradient(90deg, transparent, #000 14%);
}
.hero-urun{position:relative; z-index:1; width:100%; max-width:560px; aspect-ratio:1/.86}
.hero-urun img{position:absolute; height:auto; filter:drop-shadow(0 22px 38px rgba(22,30,59,.18))}
.u-karton{width:66%; left:0; top:0; transform:rotate(-5deg)}
.u-pet{width:68%; right:0; bottom:0; transform:rotate(4deg)}

/* ---------- ürün adı şeridi (arka plan yok) ---------- */
.hero-serit{position:absolute; bottom:0; left:0; right:0; z-index:1; border-top:1px solid var(--cizgi); overflow:hidden; padding:14px 0}
.serit-akis{display:flex; align-items:center; gap:12px; width:max-content; animation:kay 42s linear infinite}
.serit-akis span{
  font-family:var(--bas); font-weight:700; font-size:.72rem; letter-spacing:.16em;
  color:var(--metin-soluk); white-space:nowrap;
  padding:9px 20px; border-radius:100px;
  background:#fff; border:1px solid var(--cizgi);
}
/* kutular ayrımı sağladığı için nokta ayraçlar gizlendi */
.serit-akis i{display:none}
@keyframes kay{to{transform:translateX(-50%)}}

/* ---------- hakkımızda ---------- */
.iki-sutun{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,6vw,84px); align-items:start}
.iki-sutun .sag p{color:var(--metin-soluk); font-size:1.05rem}
.iki-sutun .sag .alti-cizili{
  color:var(--metin); font-weight:600; border-left:3px solid var(--mavi);
  padding-left:20px; margin-top:26px;
}

.sayilar{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:clamp(48px,6vw,84px); border-top:1px solid var(--cizgi); padding-top:44px}
.sayi b{display:block; font-family:var(--bas); font-weight:800; font-size:clamp(1.7rem,3vw,2.6rem); letter-spacing:-.03em; color:var(--lacivert); line-height:1}
.sayi span{display:block; margin-top:8px; font-size:.9rem; color:var(--metin-soluk)}

/* ---------- manifesto ---------- */
.manifesto{overflow:hidden}
.manifesto-ic{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:center}
.manifesto h2{color:#fff; margin-bottom:26px}
.manifesto-metin{color:rgba(255,255,255,.72); font-size:1.05rem}
.ilke{
  display:flex; align-items:center; gap:16px;
  background:rgba(255,255,255,.06); border:1px solid var(--cizgi-koyu);
  border-radius:100px; padding:16px 28px; margin-bottom:14px;
  font-family:var(--bas); font-weight:700; font-size:clamp(1rem,1.7vw,1.3rem); color:#fff;
  transition:background .3s, transform .3s;
}
.ilke:hover{background:rgba(36,80,232,.22); transform:translateX(6px)}
.ilke span{font-size:.72rem; letter-spacing:.14em; color:var(--mavi); font-weight:800}
.manifesto-son{margin-top:26px; color:#fff; font-family:var(--bas); font-weight:700; font-size:1.05rem}

/* ---------- ürünler ---------- */
.urunler{background:#fff}
.filtre{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:38px}
.fil{
  font-family:var(--bas); font-weight:600; font-size:.9rem;
  padding:10px 20px; border-radius:100px; background:var(--panel); color:var(--metin-soluk);
  transition:background .25s, color .25s;
}
.fil:hover{background:#E1E5EE; color:var(--metin)}
.fil.aktif{background:var(--lacivert); color:#fff}

.izgara{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.kart{
  background:var(--krem); border-radius:var(--r-b); overflow:hidden; cursor:pointer;
  border:1px solid var(--cizgi); transition:transform var(--gecis), box-shadow var(--gecis), border-color .3s;
  display:flex; flex-direction:column;
}
.kart:hover,.kart:focus-visible{transform:translateY(-6px); box-shadow:0 26px 50px -26px rgba(22,30,59,.42); border-color:transparent; outline:none}
.kart:focus-visible{box-shadow:0 0 0 3px var(--mavi)}
.kart.gizli{display:none}
.kart-gorsel{aspect-ratio:4/3; background:#fff; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:18px}
.kart-gorsel img{width:100%; height:100%; object-fit:contain; transition:transform .6s cubic-bezier(.22,.8,.28,1)}
.kart:hover .kart-gorsel img{transform:scale(1.06)}
.kart-alt{padding:24px 26px 26px; border-top:1px solid var(--cizgi); flex:1; display:flex; flex-direction:column}
.kart-alt h3{margin-bottom:8px}
.kart-alt p{color:var(--metin-soluk); font-size:.94rem; margin-bottom:16px; flex:1}
.kart-ok{
  font-family:var(--bas); font-weight:700; font-size:.85rem; color:var(--mavi);
  display:inline-flex; align-items:center; gap:7px;
}
.kart-ok::after{content:"→"; transition:transform .3s}
.kart:hover .kart-ok::after{transform:translateX(5px)}
.izgara-not{margin-top:36px; font-size:.9rem; color:var(--metin-soluk); text-align:center}

/* ---------- editoryal şerit ---------- */
.galeri{overflow:hidden; background:var(--lacivert-koyu); padding:0}
.galeri-akis{display:flex; gap:0; width:max-content; animation:kay2 70s linear infinite}
.galeri-akis img{width:clamp(200px,22vw,290px); height:auto; flex:none}
@keyframes kay2{to{transform:translateX(-50%)}}
.galeri:hover .galeri-akis{animation-play-state:paused}

/* ---------- referanslar ---------- */
.referanslar{overflow:hidden}
.referanslar .kap{position:relative; z-index:1}
.referanslar h2{color:#fff}
.ref-gorsel{
  background:rgba(255,255,255,.045); border:1px solid var(--cizgi-koyu);
  border-radius:var(--r-b); padding:clamp(20px,4vw,44px); margin-bottom:46px;
}
.ref-akis{overflow:hidden; border-top:1px solid var(--cizgi-koyu); border-bottom:1px solid var(--cizgi-koyu); padding:18px 0}
.ref-satir{display:flex; gap:44px; width:max-content; animation:kay 56s linear infinite}
.ref-satir span{font-family:var(--bas); font-weight:700; font-size:.82rem; letter-spacing:.16em; color:rgba(255,255,255,.42); white-space:nowrap}

/* ---------- iletişim ---------- */
.iletisim{background:var(--krem)}
.il-izgara{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,3vw,40px); align-items:stretch}

/* sol: lacivert kartvizit kartı */
.il-kart{
  position:relative; overflow:hidden; border-radius:var(--r-b);
  display:flex; flex-direction:column;
}
.il-kart-ic{position:relative; z-index:1; padding:clamp(30px,3.4vw,46px); display:flex; flex-direction:column; height:100%}
.il-kart h2{color:#fff; margin-bottom:18px}
.etiket.mavi{color:var(--mavi)}
.il-aciklama{color:rgba(255,255,255,.68); font-size:1.02rem; margin-bottom:8px}

.il-liste{list-style:none; margin:auto 0 0; padding:26px 0 0; display:block}
.il-liste li{border-top:1px solid var(--cizgi-koyu)}
.il-liste a{
  display:flex; align-items:center; gap:16px; padding:16px 0; color:#fff;
  transition:padding .28s cubic-bezier(.22,.8,.28,1);
}
.il-ik{
  width:42px; height:42px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid var(--cizgi-koyu); color:#fff;
  transition:background .25s, border-color .25s;
}
.il-ik svg{width:19px; height:19px; stroke-linecap:round; stroke-linejoin:round}
.il-metin{flex:1; min-width:0}
.il-metin b{display:block; font-family:var(--bas); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:700; margin-bottom:3px}
.il-metin span{font-size:1.02rem; color:#fff; font-weight:500}
.il-ok{width:18px; height:18px; flex:none; opacity:0; transform:translateX(-8px); transition:opacity .25s, transform .25s; stroke-linecap:round; stroke-linejoin:round}
.il-liste a:hover{padding-left:10px}
.il-liste a:hover .il-ik{background:var(--mavi); border-color:var(--mavi)}
.il-liste a:hover .il-ok{opacity:1; transform:none}
.il-liste a:focus-visible{outline:2px solid var(--mavi); outline-offset:3px; border-radius:10px}

.form{background:#fff; border:1px solid var(--cizgi); border-radius:var(--r-b); padding:clamp(26px,3.4vw,40px); height:100%}
.form h3{margin-bottom:24px}
.alan{margin-bottom:18px}
.alan-cift{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.alan label,.alan-baslik{display:block; font-family:var(--bas); font-weight:600; font-size:.83rem; margin-bottom:7px; color:var(--metin)}
.alan input,.alan textarea{
  width:100%; font:inherit; font-size:.96rem; color:var(--metin);
  padding:13px 16px; border:1px solid var(--cizgi); border-radius:12px; background:var(--krem);
  transition:border-color .22s, box-shadow .22s, background .22s;
}
.alan textarea{resize:vertical; min-height:110px}
.alan input:focus,.alan textarea:focus{
  outline:none; border-color:var(--mavi); background:#fff; box-shadow:0 0 0 3px rgba(36,80,232,.13);
}

/* ---------- özel açılır menü ---------- */
.secim{position:relative}
.secim-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--govde); font-size:.96rem; color:var(--metin); text-align:left;
  padding:13px 16px; border:1px solid var(--cizgi); border-radius:12px; background:var(--krem);
  transition:border-color .22s, box-shadow .22s, background .22s;
}
.secim-btn:hover{background:#fff}
.secim-btn:focus-visible,.secim.acik .secim-btn{
  outline:none; border-color:var(--mavi); background:#fff; box-shadow:0 0 0 3px rgba(36,80,232,.13);
}
.secim-deger{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.secim-deger.bos{color:#9AA2B5}
.secim-ok{width:18px; height:18px; flex:none; color:var(--metin-soluk); transition:transform .25s}
.secim.acik .secim-ok{transform:rotate(180deg)}

.secim-liste{
  position:absolute; z-index:20; top:calc(100% + 6px); left:0; right:0;
  margin:0; padding:6px; list-style:none;
  background:#fff; border:1px solid var(--cizgi); border-radius:14px;
  box-shadow:0 20px 44px -18px rgba(22,30,59,.4);
  max-height:270px; overflow-y:auto; overscroll-behavior:contain;
  animation:menuAc .18s ease;
}
.secim-liste[hidden]{display:none}
/* odak listede durur; konumu vurgulanan seçenek gösterir (aria-activedescendant) */
.secim-liste:focus,.secim-liste:focus-visible{outline:none}
@keyframes menuAc{from{opacity:0; transform:translateY(-6px)}}
.secim-liste li{
  padding:11px 14px; border-radius:9px; font-size:.94rem; color:var(--metin);
  cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px;
  transition:background .15s, color .15s, box-shadow .15s;
}
.secim-liste li:hover{background:var(--panel)}
.secim-liste li.vurgulu{background:rgba(36,80,232,.09); box-shadow:inset 3px 0 0 var(--mavi)}
.secim-liste li[aria-selected="true"]{color:var(--mavi); font-weight:600}
.secim-liste li[aria-selected="true"]::after{content:"✓"; font-size:.9rem}
.secim-liste li[data-deger=""]{color:var(--metin-soluk)}
.alan input.hata,.alan textarea.hata{border-color:#D93A3A; box-shadow:0 0 0 3px rgba(217,58,58,.12)}
.form-btn{margin-top:26px}
.form-btn .btn{width:100%}
.form-not{margin-top:16px; font-size:.9rem; color:var(--metin-soluk); min-height:1.2em}
.form-not.ok{color:var(--yesil)}
.form-not.err{color:#D93A3A}

/* ---------- footer ---------- */
.alt{position:relative; overflow:hidden; padding:clamp(60px,7vw,96px) 0 0; color:#fff}
.alt .kap{position:relative; z-index:1}
.alt-ic{display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(36px,6vw,72px); padding-bottom:56px}
.alt-marka img{width:150px; height:auto; margin-bottom:22px}
.alt-marka p{color:rgba(255,255,255,.62); max-width:300px; font-size:.98rem}
.alt-menu{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
.alt-menu b{display:block; font-family:var(--bas); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:16px}
.alt-menu a{display:block; color:rgba(255,255,255,.6); font-size:.94rem; padding:5px 0; transition:color .2s}
.alt-menu a:hover{color:#fff}
.alt-son{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--cizgi-koyu); padding-top:24px; padding-bottom:22px;
  font-size:.85rem; color:rgba(255,255,255,.45);
}

/* ---------- ajans imzası (sayfanın en altı) ---------- */
.alt-imza{
  border-top:1px solid var(--cizgi-koyu);
  padding:20px 0 30px; text-align:center;
  font-size:.9rem; color:rgba(255,255,255,.5);
}
.alt-imza a{
  font-family:var(--bas); font-weight:800; font-size:1.3rem;
  letter-spacing:-.01em; color:#fff;
  transition:opacity .2s;
}
.alt-imza a:hover{opacity:.72; text-decoration:underline; text-underline-offset:4px}

/* ---------- sabit WhatsApp butonu ---------- */
/* ikon kendi baloncuğunu taşıdığı için ayrıca daire zemin yok;
   sayfadan ayrışsın diye gölge doğrudan şekle uygulanıyor */
.wa-sabit{
  position:fixed; right:24px; bottom:24px; z-index:90;
  width:84px; height:84px; display:block;
  filter:drop-shadow(0 10px 22px rgba(15,21,41,.24));
  transition:transform .25s;
}
.wa-sabit:hover{transform:scale(1.07)}
.wa-ikon{width:100%; height:100%; display:block}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:20px}
.modal[hidden]{display:none}
.modal-perde{position:absolute; inset:0; background:rgba(15,21,41,.72); backdrop-filter:blur(6px); animation:solgun .3s ease}
.modal-kutu{
  position:relative; background:#fff; border-radius:var(--r-b); width:min(980px,100%);
  max-height:88svh; overflow:auto; display:grid; grid-template-columns:.85fr 1.15fr;
  animation:yuksel .38s cubic-bezier(.22,.8,.28,1);
}
@keyframes solgun{from{opacity:0}}
@keyframes yuksel{from{opacity:0; transform:translateY(22px) scale(.98)}}
.modal-gorsel{background:var(--krem); display:grid; place-items:center; padding:32px; position:sticky; top:0; align-self:start}
.modal-gorsel img{width:100%; height:auto; object-fit:contain}
.modal-ic{padding:clamp(28px,3.4vw,44px)}
.modal-ic h3{font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:14px}
.modal-kapat{
  position:absolute; top:14px; right:14px; z-index:2; width:40px; height:40px; border-radius:50%;
  background:rgba(22,30,59,.08); display:grid; place-items:center; transition:background .22s;
}
.modal-kapat:hover{background:rgba(22,30,59,.18)}
.modal-kapat svg{width:19px; height:19px; stroke-linecap:round}
.modal-cta{margin-top:30px}

.d-ust{font-size:.86rem; letter-spacing:.06em; text-transform:uppercase; color:var(--metin-soluk); font-weight:600; margin-bottom:22px}
.d-izgara{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.d-blok{background:var(--krem); border:1px solid var(--cizgi); border-radius:var(--r); padding:20px 22px}
.d-blok h4{margin-bottom:12px; color:var(--lacivert)}
.d-blok p{font-size:.93rem; color:var(--metin); margin-bottom:.7em}
.d-etiket{
  font-family:var(--bas); font-weight:700; font-size:.68rem !important; letter-spacing:.12em;
  text-transform:uppercase; color:var(--metin-soluk); margin-bottom:3px !important; margin-top:12px;
}
.d-blok > .d-etiket:first-of-type{margin-top:0}
.d-etiketler{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px}
.d-etiketler span{
  font-size:.82rem; padding:7px 15px; border-radius:100px;
  background:var(--panel); color:var(--metin-soluk);
}

/* ---------- animasyon ----------
   Gizleme yalnızca JS varken uygulanır; JS yoksa içerik olduğu gibi görünür. */
.js [data-anim]{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.28,1)}
.js [data-anim].gorunur{opacity:1; transform:none}

/* ============================================================
   DUYARLI
   ============================================================ */
/* menü ile logo arası daraldığında alt yazıyı gizle */
@media (max-width:1080px) and (min-width:821px){
  .marka-yazi em{display:none}
  .menu{gap:22px}
}

@media (max-width:1000px){
  .izgara{grid-template-columns:repeat(2,1fr)}
  .iki-sutun,.manifesto-ic,.il-izgara,.alt-ic{grid-template-columns:1fr}
  .hero-ic{grid-template-columns:1fr; gap:44px}
  .hero-panel{max-width:none}
  .hero-sag{order:-1; min-height:320px}
  .hero-izgara{right:-12%; -webkit-mask-image:none; mask-image:none; opacity:.4}
  .hero-urun{max-width:430px}
  .sayilar{grid-template-columns:repeat(2,1fr); gap:28px}
  .modal-kutu{grid-template-columns:1fr; max-height:92svh}
  .modal-gorsel{position:static; padding:26px}
  .modal-gorsel img{max-height:270px}
}

@media (max-width:820px){
  .menu-ac{display:flex}

  /* ÖNEMLİ: backdrop-filter, position:fixed çocuklar için containing block
     yaratır ve menü panelini header kutusuna hapsederdi. Mobilde düz zemin. */
  .ust,.ust.kayan{
    background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none;
    box-shadow:0 1px 0 var(--cizgi);
  }

  .menu{
    position:fixed; inset:0 0 0 auto; width:min(340px,86vw);
    background:var(--lacivert); flex-direction:column; align-items:flex-start;
    justify-content:center; gap:6px; padding:96px 34px 40px;
    overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(102%); transition:transform .4s cubic-bezier(.22,.8,.28,1);
    box-shadow:-20px 0 60px rgba(0,0,0,.35);
  }
  .menu.acik{transform:none}
  .menu a{font-family:var(--bas); font-weight:600; font-size:1.22rem; color:#fff; padding:12px 0; width:100%}
  /* lacivert panelde koyu hover rengi yazıyı görünmez yapıyordu */
  .menu a:not(.btn):hover{color:#fff}
  .menu a:not(.btn)::after{display:none}
  .menu-cta{margin:18px 0 0; width:100%}

  /* menü açıkken çarpı, lacivert panelin üstünde kalıyor → beyaz olmalı */
  .menu-ac{position:relative; z-index:2}
  .menu-ac[aria-expanded="true"] span{background:#fff}

  .hero{padding-top:112px}
}

@media (max-width:640px){
  .izgara{grid-template-columns:1fr}
  .d-izgara{grid-template-columns:1fr}
  .alan-cift{grid-template-columns:1fr}
  .alt-menu{grid-template-columns:1fr 1fr}
  .hero-serit{padding:12px 0}
  .form-btn .btn{min-width:100%}
  .wa-sabit{width:66px; height:66px; right:16px; bottom:16px}
  .alt-imza{padding-bottom:92px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .js [data-anim]{opacity:1; transform:none}
  .panel-cizgi{display:none}
}