/* ==========================================================================
   SEFA HURDA — metalhurdafiyati.com
   Tek stil dosyası. Açık tema. Mobil / tablet / masaüstü.
   Palet: bakır (metal kimliği) + lacivert (güven) + sıcak beyaz zemin.
   Tüm metin renkleri WCAG AA (≥4.5:1) kontrast sağlar.
   ========================================================================== */

/* --------------------------------------------------------- 1. JETONLAR -- */
:root{
  /* Zeminler */
  --kagit:#FFFFFF;
  --zemin:#F7F6F3;
  --zemin-2:#EFECE6;
  --kart:#FFFFFF;

  /* Mürekkep — beyaz üzerinde kontrast oranları yorumda */
  --murekkep:#15181D;      /* 17.0:1 */
  --murekkep-2:#3F464F;    /*  9.7:1 */
  --soluk:#68707A;         /*  5.0:1 */
  --cizgi:#E4E1DB;
  --cizgi-koyu:#D2CEC6;

  /* Bakır — metal kimliği */
  --bakir:#B45309;         /*  4.9:1 */
  --bakir-koyu:#8C4008;
  --bakir-acik:#FDF4E8;
  --bakir-kenar:#F0D9BC;

  /* Lacivert — güven, kurumsal */
  --lacivert:#0E3A63;      /* 11.7:1 */
  --lacivert-2:#17507F;
  --lacivert-koyu:#0A2B4A;
  --lacivert-acik:#EEF4FA;

  /* Durum */
  --yesil:#15803D;         /*  4.6:1 */
  --yesil-acik:#ECFDF3;
  --kirmizi:#B42318;
  --kirmizi-acik:#FEF3F2;

  /* Ölçü */
  --en:1200px;
  --bosluk:24px;
  --r-s:8px;
  --r:12px;
  --r-l:18px;
  --r-xl:26px;

  /* Gölge — yumuşak, katmanlı */
  --golge-s:0 1px 2px rgba(16,24,40,.05);
  --golge:0 2px 4px -1px rgba(16,24,40,.06), 0 4px 12px -2px rgba(16,24,40,.08);
  --golge-l:0 8px 16px -4px rgba(16,24,40,.08), 0 20px 40px -8px rgba(16,24,40,.12);
  --golge-bakir:0 8px 24px -6px rgba(180,83,9,.35);

  /* Tipografi */
  --yazi:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

/* ------------------------------------------------------------ 2. RESET -- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  font-family:var(--yazi);
  font-size:16px;
  line-height:1.65;
  color:var(--murekkep-2);
  background:var(--kagit);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}

:focus-visible{
  outline:3px solid var(--bakir);
  outline-offset:2px;
  border-radius:4px;
}

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

/* --------------------------------------------------------- 3. DÜZEN ----- */
.kapsayici{width:100%;max-width:var(--en);margin-inline:auto;padding-inline:var(--bosluk)}
.bolum{padding-block:clamp(56px,7vw,96px)}
.bolum-dar{padding-block:clamp(40px,5vw,64px)}
.bolum.zemin{background:var(--zemin)}
.bolum.lacivert{background:var(--lacivert);color:#DCE6F0}

.izgara{display:grid;gap:clamp(18px,2.4vw,28px)}
.iz-2{grid-template-columns:repeat(2,1fr)}
.iz-3{grid-template-columns:repeat(3,1fr)}
.iz-4{grid-template-columns:repeat(4,1fr)}
.iz-6{grid-template-columns:repeat(6,1fr)}

.orta{text-align:center}
.orta .bolum-bas{margin-inline:auto}

/* ----------------------------------------------------- 4. TİPOGRAFİ ----- */
h1,h2,h3,h4{
  color:var(--murekkep);
  line-height:1.15;
  letter-spacing:-.02em;
  font-weight:800;
  text-wrap:balance;
}
h1{font-size:clamp(2rem,1.4rem + 2.7vw,3.5rem);letter-spacing:-.03em}
h2{font-size:clamp(1.6rem,1.2rem + 1.7vw,2.5rem)}
h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);font-weight:750}
h4{font-size:1.05rem;font-weight:700}

.ust-etiket{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.78rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bakir);margin-bottom:14px;
}
.ust-etiket::before{content:"";width:26px;height:2px;background:var(--bakir);border-radius:2px}

.bolum-bas{max-width:62ch;margin-bottom:clamp(30px,4vw,48px)}
.bolum-bas p{margin-top:14px;font-size:1.06rem;color:var(--soluk)}

/* Başlık + sağ üstte güncelleme rozeti.
   İç .bolum-bas kendi alt boşluğunu taşıdığı için satır içinde sıfırlanır. */
.bolum-bas-satir{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,48px);
}
.bolum-bas-satir .bolum-bas{margin-bottom:0}

.fiyat-rozet{
  display:inline-flex;align-items:center;gap:10px;flex:none;
  padding:11px 16px;border-radius:var(--r);
  background:#fff;border:1px solid var(--bakir-kenar,#F0D9BC);
  box-shadow:0 2px 10px rgba(180,83,9,.09);
}
.fiyat-rozet .fr-nokta{
  width:9px;height:9px;border-radius:50%;flex:none;
  background:#0B6E38;box-shadow:0 0 0 3px rgba(11,110,56,.16);
}
.fiyat-rozet .fr-metin{display:flex;flex-direction:column;line-height:1.25}
.fiyat-rozet .fr-etiket{
  font-size:.68rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--soluk);
}
.fiyat-rozet .fr-tarih{font-size:.98rem;font-weight:800;color:var(--bakir)}

/* Dar ekranda rozet başlığın altına iner ve tam genişliğe yayılır */
@media(max-width:640px){
  .bolum-bas-satir{gap:14px}
  .fiyat-rozet{width:100%;justify-content:flex-start}
}

.giris{font-size:clamp(1.02rem,.98rem + .3vw,1.18rem);color:var(--murekkep-2);max-width:64ch}
.giris strong{color:var(--murekkep);font-weight:700}

/* Uzun metin blokları (blog, kurumsal) */
.metin{max-width:none}
.metin h2{margin:38px 0 14px;font-size:clamp(1.4rem,1.2rem + .9vw,1.9rem)}
.metin h3{margin:28px 0 10px;color:var(--lacivert)}
.metin p{margin-bottom:16px}
.metin ul,.metin ol{margin:0 0 18px;padding-left:0}
.metin li{position:relative;padding-left:28px;margin-bottom:10px}
.metin ul li::before{
  content:"";position:absolute;left:8px;top:.65em;
  width:7px;height:7px;border-radius:50%;background:var(--bakir);
}
.metin ol{counter-reset:s}
.metin ol li{counter-increment:s}
.metin ol li::before{
  content:counter(s);position:absolute;left:0;top:.1em;
  width:21px;height:21px;border-radius:50%;
  background:var(--bakir-acik);color:var(--bakir);
  font-size:.75rem;font-weight:800;display:grid;place-items:center;
}
.metin a{color:var(--bakir);font-weight:650;text-decoration:underline;text-underline-offset:3px}
.metin a:hover{color:var(--bakir-koyu)}
.metin img{border-radius:var(--r);margin:22px 0;box-shadow:var(--golge)}
.metin blockquote{
  margin:24px 0;padding:18px 24px;
  background:var(--bakir-acik);border-left:4px solid var(--bakir);
  border-radius:0 var(--r) var(--r) 0;color:var(--murekkep);font-size:1.02rem;
}
.metin table{margin:22px 0;font-size:.94rem;border:1px solid var(--cizgi);border-radius:var(--r);overflow:hidden}
.metin th{background:var(--lacivert);color:#fff;text-align:left;padding:12px 16px;font-weight:700}
.metin td{padding:11px 16px;border-top:1px solid var(--cizgi)}
.metin tbody tr:nth-child(even){background:var(--zemin)}
.metin figure{margin:22px 0}
.metin figcaption{font-size:.86rem;color:var(--soluk);text-align:center;margin-top:8px}
.metin hr{border:none;border-top:1px solid var(--cizgi);margin:32px 0}

/* --------------------------------------------------------- 5. BUTON ----- */
.dugme{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:var(--r);
  font-weight:700;font-size:.96rem;letter-spacing:.01em;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.dugme svg{flex:none}
.dugme:active{transform:translateY(1px)}

.d-bakir{background:var(--bakir);color:#fff;box-shadow:var(--golge-bakir)}
.d-bakir:hover{background:var(--bakir-koyu);box-shadow:0 10px 28px -6px rgba(180,83,9,.45);transform:translateY(-2px)}

.d-lacivert{background:var(--lacivert);color:#fff;box-shadow:0 6px 20px -6px rgba(14,58,99,.4)}
.d-lacivert:hover{background:var(--lacivert-koyu);transform:translateY(-2px)}

.d-cerceve{background:var(--kagit);color:var(--murekkep);border:1.5px solid var(--cizgi-koyu)}
.d-cerceve:hover{border-color:var(--bakir);color:var(--bakir);background:var(--bakir-acik)}

.d-yesil{background:var(--yesil);color:#fff;box-shadow:0 6px 20px -6px rgba(21,128,61,.4)}
.d-yesil:hover{filter:brightness(1.08);transform:translateY(-2px)}

.d-buyuk{padding:16px 32px;font-size:1.04rem}
.d-tam{width:100%}

/* --------------------------------------------------------- 6. ROZET ----- */
.rozet{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:50px;
  font-size:.8rem;font-weight:700;letter-spacing:.01em;
}
.r-yesil{background:var(--yesil-acik);color:var(--yesil)}
.r-bakir{background:var(--bakir-acik);color:var(--bakir)}
.r-lacivert{background:var(--lacivert-acik);color:var(--lacivert)}
.r-gri{background:var(--zemin-2);color:var(--murekkep-2)}

.nabiz{width:7px;height:7px;border-radius:50%;background:currentColor;animation:nabiz 2s ease-in-out infinite}
@keyframes nabiz{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* -------------------------------------------------------- 7. BAŞLIK ----- */
.ust-serit{
  background:var(--lacivert-koyu);color:#C3D3E3;
  font-size:.83rem;padding:8px 0;
}
.ust-serit .kapsayici{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ust-serit a{transition:color .18s}
.ust-serit a:hover{color:#fff}
.us-sol{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.us-oge{display:inline-flex;align-items:center;gap:7px}
.ust-serit a.us-oge{padding:4px 0}   /* dokunma hedefi ≥ 24px */
.us-oge svg{flex:none;opacity:.75}

header.site{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--cizgi);
}
header.site nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;height:78px;
}

/* Logo — kurumsal görsel */
.logo{display:inline-flex;align-items:center;flex:none}
.logo img{width:auto;height:52px;display:block}
@media(max-width:1100px){ .logo img{height:48px} }
/* Mobilde logo okunabilir kalmalı — 38px'te marka adı seçilemiyordu */
@media(max-width:600px){  .logo img{height:46px} }
@media(max-width:360px){  .logo img{height:40px} }

/* Masaüstü menü */
.menu{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.menu a{
  padding:9px 11px;border-radius:var(--r-s);
  font-size:.9rem;font-weight:650;color:var(--murekkep-2);
  white-space:nowrap;
  transition:color .18s, background .18s;
}
@media(max-width:1240px){
  .menu a{padding:9px 8px;font-size:.86rem}
}
.menu a:hover{color:var(--bakir);background:var(--bakir-acik)}
.menu a.aktif{color:var(--bakir);background:var(--bakir-acik)}

.nav-sag{display:flex;align-items:center;gap:10px;flex:none}

/* Hamburger */
.hamburger{
  display:none;width:46px;height:46px;border-radius:var(--r-s);
  border:1.5px solid var(--cizgi-koyu);
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  transition:border-color .18s,background .18s;
}
.hamburger:hover{border-color:var(--bakir);background:var(--bakir-acik)}
.hamburger span{
  display:block;width:20px;height:2px;border-radius:2px;background:var(--murekkep);
  transition:transform .28s ease, opacity .2s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobil menü */
.mobil-menu{
  display:none;flex-direction:column;
  background:var(--kagit);border-top:1px solid var(--cizgi);
  padding:10px 0 18px;box-shadow:var(--golge-l);
  max-height:calc(100vh - 78px);overflow-y:auto;
}
.mobil-menu.acik{display:flex}
.mobil-menu a{
  padding:14px var(--bosluk);font-size:1rem;font-weight:650;
  color:var(--murekkep);border-bottom:1px solid var(--cizgi);
  transition:background .18s,padding-left .18s,color .18s;
}
.mobil-menu a:last-of-type{border-bottom:none}
.mobil-menu a:hover,.mobil-menu a.aktif{background:var(--bakir-acik);color:var(--bakir);padding-left:calc(var(--bosluk) + 8px)}
.mobil-menu .mm-alt{padding:16px var(--bosluk) 0;display:grid;gap:10px}

/* -------------------------------------------------------- 8. TICKER ----- */
.ticker{
  background:var(--lacivert);color:#D6E3F0;
  border-bottom:1px solid rgba(255,255,255,.08);
  overflow:hidden;white-space:nowrap;padding:10px 0;
  font-size:.85rem;font-family:var(--mono);
}
.ticker-ic{display:inline-flex;align-items:center;will-change:transform}
.ticker.calis .ticker-ic{animation:kay 46s linear infinite}
.ticker:hover .ticker-ic,.ticker:focus-within .ticker-ic{animation-play-state:paused}
@keyframes kay{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk-oge{display:inline-flex;align-items:center;gap:8px;margin:0 26px}
.tk-oge b{color:#fff;font-weight:700}
.tk-yukari{color:#5EE9A0}
.tk-asagi{color:#FDA29B}
.tk-bakir{color:#F0B27A}

/* ---------------------------------------------------------- 9. HERO ----- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 500px at 88% -10%, rgba(180,83,9,.10), transparent 62%),
    radial-gradient(700px 420px at -5% 105%, rgba(14,58,99,.09), transparent 58%),
    linear-gradient(168deg,#FCFBF9 0%,#F4F2EE 100%);
  padding-block:clamp(48px,6vw,84px) clamp(56px,7vw,96px);
  border-bottom:1px solid var(--cizgi);
}
.hero-iz{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,4vw,60px);align-items:center}
.hero h1{margin-bottom:20px}
.hero h1 .vurgu{
  background:linear-gradient(100deg,var(--bakir) 10%,#D97706 55%,var(--bakir-koyu) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .giris{margin-bottom:28px}
.hero-dugmeler{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}

.guven-serit{display:flex;gap:12px;flex-wrap:wrap}
.guven-oge{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;background:var(--kagit);
  border:1px solid var(--cizgi);border-radius:50px;
  font-size:.85rem;font-weight:650;color:var(--murekkep);
  box-shadow:var(--golge-s);
}
.guven-oge svg{flex:none;color:var(--yesil)}

/* Fiyat panosu (hero sağ kart) */
.pano{
  background:var(--kart);border:1px solid var(--cizgi);
  border-radius:var(--r-xl);padding:26px;
  box-shadow:var(--golge-l);position:relative;overflow:hidden;
}
.pano::before{
  content:"";position:absolute;inset:0 0 auto;height:4px;
  background:linear-gradient(90deg,var(--bakir),#D97706,var(--lacivert));
}
.pano-bas{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.pano-bas h2{font-size:1.12rem;letter-spacing:-.01em}
.pano-liste{display:grid}
.pl-bas{
  display:grid;grid-template-columns:1.25fr .95fr auto;gap:14px;
  padding:0 0 10px;border-bottom:1px solid var(--cizgi);
  font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--soluk);
}
.pl-bas span:last-child{text-align:right}
.pl-satir{
  display:grid;grid-template-columns:1.25fr .95fr auto;gap:14px;align-items:center;
  padding:13px 0;border-top:1px solid var(--cizgi);
}
.pl-bas + .pl-satir{border-top:none}
.pl-ad{font-weight:700;color:var(--murekkep);font-size:.95rem}
.pl-durum{font-size:.83rem;color:var(--soluk)}
.pl-durum.talep{color:var(--yesil);font-weight:650}
.pl-fiyat{
  font-family:var(--mono);font-weight:700;font-size:1rem;
  color:var(--bakir);text-align:right;white-space:nowrap;
}
@media(max-width:480px){
  .pl-bas{grid-template-columns:1fr auto}
  .pl-bas span:nth-child(2){display:none}
  .pl-satir{grid-template-columns:1fr auto;gap:2px 12px}
  .pl-ad{grid-column:1;grid-row:1}
  .pl-durum{grid-column:1;grid-row:2}
  .pl-fiyat{grid-column:2;grid-row:1/3;align-self:center}
}
.pano-not{
  margin-top:16px;padding-top:15px;border-top:1px solid var(--cizgi);
  font-size:.82rem;color:var(--soluk);display:flex;align-items:center;gap:8px;
}

/* ------------------------------------------------------ 10. METRİK ------ */
.metrikler{background:var(--lacivert);color:#fff}
.metrik-iz{display:grid;grid-template-columns:repeat(4,1fr)}
.metrik{padding:34px 20px;text-align:center;border-left:1px solid rgba(255,255,255,.12)}
.metrik:first-child{border-left:none}
.metrik b{display:block;font-size:clamp(1.9rem,1.4rem + 1.6vw,2.7rem);font-weight:850;letter-spacing:-.02em;color:#fff}
.metrik span{font-size:.86rem;color:#B9CCDF;font-weight:600}

/* -------------------------------------------------------- 11. KART ------ */
.kart{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r-l);
  padding:28px 24px;box-shadow:var(--golge-s);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.kart:hover{transform:translateY(-4px);box-shadow:var(--golge-l);border-color:var(--bakir-kenar)}
.kart h3{margin-bottom:9px}
.kart p{font-size:.93rem;color:var(--soluk)}
.kart-ikon{
  width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  margin-bottom:17px;background:var(--bakir-acik);color:var(--bakir);
  border:1px solid var(--bakir-kenar);
}
.kart-ikon.mavi{background:var(--lacivert-acik);color:var(--lacivert);border-color:#D3E2F0}

/* Adım / süreç */
.surec{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;counter-reset:adim}
.adim{position:relative;padding-top:8px}
.adim::before{
  counter-increment:adim;content:counter(adim,decimal-leading-zero);
  display:block;font-size:2.4rem;font-weight:850;line-height:1;
  color:var(--bakir);opacity:.28;margin-bottom:10px;letter-spacing:-.03em;
}
.adim h3{margin-bottom:7px}
.adim p{font-size:.9rem;color:var(--soluk)}

/* Metal vitrini — yuvarlak fotoğraflar, bakır halka */
.metal-iz{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,2vw,26px)}
.metal-kart{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:14px 8px;border-radius:var(--r-l);
  border:1px solid transparent;
  transition:transform .24s ease, background .24s ease, border-color .24s ease;
}
.metal-kart:hover{transform:translateY(-5px);background:var(--kart);border-color:var(--cizgi)}
.metal-halka{
  width:clamp(88px,9vw,116px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:var(--zemin-2);
  border:4px solid #E9A23B;
  box-shadow:0 0 0 3px rgba(180,83,9,.16), 0 10px 24px -6px rgba(16,24,40,.22);
  display:grid;place-items:center;margin-bottom:12px;
  transition:border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}
.metal-kart:hover .metal-halka{
  border-color:var(--bakir);
  box-shadow:0 0 0 4px rgba(180,83,9,.22), 0 16px 32px -8px rgba(180,83,9,.4);
  transform:scale(1.04);
}
.metal-halka img{width:100%;height:100%;object-fit:cover}
.metal-kart b{font-size:.95rem;color:var(--murekkep);font-weight:750;line-height:1.3}
.metal-kart small{
  font-size:.78rem;color:var(--bakir);font-weight:700;
  opacity:0;transform:translateY(-3px);transition:all .24s ease;
}
.metal-kart:hover small{opacity:1;transform:none}
@media(hover:none){.metal-kart small{opacity:1;transform:none}}

/* --------------------------------------------------- 12. FİYAT TABLO ---- */
.fiyat-kutu{
  background:var(--kart);border:1px solid var(--cizgi);
  border-radius:var(--r-l);overflow:hidden;box-shadow:var(--golge);
}
.ft-bas{
  display:grid;grid-template-columns:1.1fr 1.7fr .5fr .7fr;gap:14px;
  padding:14px 22px;background:var(--lacivert);color:#fff;
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.ft-bas span:last-child{text-align:right}
.ft-grup{
  padding:13px 22px;background:var(--bakir-acik);
  color:var(--bakir-koyu);font-weight:800;font-size:.95rem;
  letter-spacing:.01em;border-top:1px solid var(--bakir-kenar);border-bottom:1px solid var(--bakir-kenar);
}
.ft-satir{
  display:grid;grid-template-columns:1.1fr 1.7fr .5fr .7fr;gap:6px 14px;align-items:center;
  padding:14px 22px;border-top:1px solid var(--cizgi);
  transition:background .15s;
}
.ft-satir:hover{background:var(--zemin)}
.ft-satir b{color:var(--murekkep);font-weight:650;font-size:.96rem}
.ft-satir .ft-acik{font-size:.88rem;color:var(--soluk)}
.ft-satir .ft-birim{font-size:.85rem;color:var(--soluk)}
.ft-satir .ft-fiyat{
  font-family:var(--mono);font-weight:700;font-size:1rem;
  color:var(--bakir);text-align:right;
}
.ft-satir .ft-fiyat.ara{font-size:.85rem;color:var(--lacivert);font-family:var(--yazi);font-weight:700}

.fiyat-not{
  display:flex;gap:12px;align-items:flex-start;
  margin-top:18px;padding:16px 18px;
  background:var(--lacivert-acik);border:1px solid #D3E2F0;
  border-radius:var(--r);font-size:.88rem;color:var(--murekkep-2);
}
.fiyat-not svg{flex:none;color:var(--lacivert);margin-top:2px}

/* --------------------------------------------------- 13. HESAPLAYICI ---- */
.hesap{
  background:linear-gradient(160deg,var(--kart),var(--zemin));
  border:1px solid var(--bakir-kenar);border-radius:var(--r-l);
  padding:28px;box-shadow:var(--golge);
}
.hesap h3{margin-bottom:6px}
.hesap>p{color:var(--soluk);font-size:.92rem;margin-bottom:18px}
.hesap-satir{display:flex;gap:12px;flex-wrap:wrap}
.hesap-satir select,.hesap-satir input{
  flex:1;min-width:160px;padding:13px 15px;
  background:var(--kagit);border:1.5px solid var(--cizgi-koyu);
  border-radius:var(--r-s);font-size:.95rem;color:var(--murekkep);
  transition:border-color .18s, box-shadow .18s;
}
.hesap-satir select:focus,.hesap-satir input:focus{
  outline:none;border-color:var(--bakir);box-shadow:0 0 0 3px rgba(180,83,9,.14);
}
.hesap-sonuc{
  margin-top:18px;padding:18px;border-radius:var(--r);
  background:var(--lacivert);color:#fff;text-align:center;
  font-size:1.9rem;font-weight:850;letter-spacing:-.02em;min-height:1.2em;
  font-family:var(--mono);
}
.hesap-not{font-size:.82rem;color:var(--soluk);margin-top:10px}
.hesap-not a{color:var(--bakir);font-weight:700}

/* ------------------------------------------------------- 14. BÖLGE ------ */
.bolge-grup{
  margin-bottom:22px;padding:clamp(20px,2.6vw,28px);
  background:var(--kart);border:1px solid var(--cizgi);
  border-radius:var(--r-l);box-shadow:var(--golge-s);
}
.bolge-grup h3{margin-bottom:8px;color:var(--bakir)}
.bg-ust{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:18px;font-size:.9rem;color:var(--soluk);
}
.bg-tel{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--bakir);font-weight:750;white-space:nowrap;
  padding:6px 2px;                 /* dokunma hedefi ≥ 32px */
  transition:color .18s;
}
.bg-tel:hover{color:var(--bakir-koyu)}

/* WhatsApp metin bağlantısı — beyaz üzerinde 6.3:1 kontrast */
.wa-metin-link{
  display:inline-flex;align-items:center;gap:8px;
  color:#0B6E38;font-weight:750;padding:6px 0;
}
.wa-metin-link:hover{color:#095C2F}
.bolge-iz{display:flex;flex-wrap:wrap;gap:10px}
.bolge-etiket{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 17px;border-radius:50px;
  background:var(--kagit);border:1px solid var(--cizgi);
  font-size:.89rem;font-weight:650;color:var(--murekkep-2);
  transition:all .18s;
}
.bolge-etiket:hover{border-color:var(--bakir);color:var(--bakir);background:var(--bakir-acik);transform:translateY(-2px)}
.bolge-etiket svg{flex:none;opacity:.5}
.bolge-etiket:hover svg{opacity:1}

/* Sayfalama */
.sayfalama{display:flex;gap:8px;justify-content:center;margin-top:38px;flex-wrap:wrap}
.sayfalama .bolge-etiket.aktif{
  border-color:var(--bakir);color:var(--bakir);
  background:var(--bakir-acik);font-weight:800;
}
.sayfalama-bilgi{
  text-align:center;margin-top:14px;font-size:.86rem;color:var(--soluk);
}
.sayfalama-bilgi strong{color:var(--murekkep)}

/* Etiket bulutu — sayfa altı ilgili aramalar */
.etiket-bulut{display:flex;flex-wrap:wrap;gap:8px}
.etiket-bulut .et{
  padding:6px 13px;border-radius:50px;
  background:var(--kagit);border:1px solid var(--cizgi);
  font-size:.82rem;color:var(--soluk);font-weight:600;
}

/* -------------------------------------------------------- 15. BLOG ------ */
.blog-iz{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.blog-kart{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r-l);
  box-shadow:var(--golge-s);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.blog-kart:hover{transform:translateY(-5px);box-shadow:var(--golge-l);border-color:var(--bakir-kenar)}
.blog-gorsel{
  aspect-ratio:16/9;background:var(--zemin-2);
  display:grid;place-items:center;border-bottom:1px solid var(--cizgi);overflow:hidden;
}
.blog-gorsel img{width:100%;height:100%;object-fit:cover}
.blog-ic{padding:22px;display:flex;flex-direction:column;flex:1}
.blog-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:11px;font-size:.79rem}
.blog-meta .kat{color:var(--bakir);font-weight:750;letter-spacing:.06em;text-transform:uppercase}
.blog-meta time{color:var(--soluk)}
.blog-kart h3{font-size:1.12rem;margin-bottom:9px;line-height:1.3}
.blog-kart p{font-size:.9rem;color:var(--soluk);flex:1}
.blog-devam{
  margin-top:16px;display:inline-flex;align-items:center;gap:7px;
  font-size:.88rem;font-weight:700;color:var(--bakir);transition:gap .2s;
}
.blog-kart:hover .blog-devam{gap:12px}

/* Blog yazı başlığı */
.yazi-bas{
  background:linear-gradient(168deg,#FCFBF9,#F3F1ED);
  border-bottom:1px solid var(--cizgi);padding-block:clamp(32px,4vw,52px);
}
.yazi-bas h1{margin:14px 0 16px}
.yazi-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:.88rem;color:var(--soluk)}
.yazi-meta span{display:inline-flex;align-items:center;gap:7px}
.yazi-govde{max-width:820px;margin-inline:auto}

/* Editörden gelen biçimlendirmeler — panelde uygulanan her şey ön yüzde de
   görünmeli, yoksa yazar gördüğüyle yayınlanan arasında fark oluşur.
   Bölge sayfası gövdesi de aynı kuralları kullanır. */
.yazi-govde mark,.bolge-govde mark{padding:0 3px;border-radius:2px}
.yazi-govde sup,.bolge-govde sup,
.yazi-govde sub,.bolge-govde sub{font-size:.72em;line-height:0}
.yazi-govde s,.bolge-govde s,
.yazi-govde del,.bolge-govde del{text-decoration:line-through;color:var(--soluk)}
.yazi-govde u,.bolge-govde u{text-decoration:underline;text-underline-offset:2px}

.yazi-govde pre,.bolge-govde pre{
  margin:0 0 20px;padding:14px 16px;background:var(--zemin-2);
  border:1px solid var(--cizgi);border-radius:var(--r);overflow-x:auto;
}
.yazi-govde pre code,.bolge-govde pre code{
  font-family:var(--mono);font-size:.88rem;background:none;padding:0;
}
.yazi-govde code,.bolge-govde code{
  font-family:var(--mono);font-size:.9em;background:var(--zemin-2);
  padding:2px 6px;border-radius:4px;
}

/* Panelin "Bilgi" düğmesiyle eklenen vurgu kutusu */
.yazi-govde .yazi-kutu,.bolge-govde .yazi-kutu{
  margin:0 0 20px;padding:14px 18px;background:var(--lacivert-acik);
  border-left:3px solid var(--lacivert);border-radius:0 var(--r) var(--r) 0;
}

/* Hizalama — editördeki justify* komutları inline style üretir; tablo ve
   görsellerde de çalışsın diye ayrıca sınıf gerekmiyor. */
.yazi-govde [style*="text-align:center"] img,
.bolge-govde [style*="text-align:center"] img{margin-inline:auto}
.yazi-etiketler{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px;padding-top:26px;border-top:1px solid var(--cizgi)}
.yazi-etiketler .et{
  padding:6px 14px;border-radius:50px;background:var(--zemin);
  border:1px solid var(--cizgi);font-size:.83rem;color:var(--murekkep-2);font-weight:600;
}

/* --------------------------------------------------------- 16. SSS ------ */
.sss-liste{display:grid;gap:12px;max-width:900px}
details.sss{
  background:var(--kart);border:1px solid var(--cizgi);
  border-radius:var(--r);overflow:hidden;transition:border-color .18s,box-shadow .18s;
}
details.sss[open]{border-color:var(--bakir-kenar);box-shadow:var(--golge)}
details.sss summary{
  padding:18px 22px;font-weight:700;font-size:1rem;color:var(--murekkep);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:16px;transition:background .15s;
}
details.sss summary::-webkit-details-marker{display:none}
details.sss summary:hover{background:var(--bakir-acik)}
details.sss summary::after{
  content:"";flex:none;width:11px;height:11px;
  border-right:2.5px solid var(--bakir);border-bottom:2.5px solid var(--bakir);
  transform:rotate(45deg) translateY(-3px);transition:transform .25s;
}
details.sss[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
details.sss .cevap{padding:0 22px 20px;color:var(--murekkep-2);font-size:.95rem}
details.sss .cevap p{margin-bottom:12px}
details.sss .cevap p:last-child{margin-bottom:0}

/* -------------------------------------------------------- 17. FORM ------ */
.form-kutu{
  background:var(--kart);border:1px solid var(--cizgi);
  border-radius:var(--r-l);padding:clamp(24px,3vw,34px);box-shadow:var(--golge);
}
.alan{margin-bottom:16px}
.alan label{
  display:block;font-size:.85rem;font-weight:700;color:var(--murekkep);
  margin-bottom:7px;
}
.alan label .zorunlu{color:var(--kirmizi)}
.alan input,.alan select,.alan textarea{
  width:100%;padding:13px 15px;
  background:var(--kagit);border:1.5px solid var(--cizgi-koyu);border-radius:var(--r-s);
  font-size:.95rem;transition:border-color .18s, box-shadow .18s;
}
.alan textarea{min-height:120px;resize:vertical}
.alan input:focus,.alan select:focus,.alan textarea:focus{
  outline:none;border-color:var(--bakir);box-shadow:0 0 0 3px rgba(180,83,9,.14);
}
.alan input::placeholder,.alan textarea::placeholder{color:#9AA1AA}
.alan-ikili{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.form-mesaj{
  margin-top:16px;padding:14px 16px;border-radius:var(--r);
  font-size:.92rem;font-weight:600;display:none;
}
.form-mesaj.basarili{display:block;background:var(--yesil-acik);border:1px solid #A6F4C5;color:var(--yesil)}
.form-mesaj.hata{display:block;background:var(--kirmizi-acik);border:1px solid #FECDCA;color:var(--kirmizi)}

/* Bal küpü (spam tuzağı) — ekranda ve okuyucuda gizli */
.bal-kupu{position:absolute!important;left:-9999px!important;opacity:0;height:0;width:0;overflow:hidden}

/* İletişim bilgi kartı */
.iletisim-iz{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);align-items:start}
.bilgi-satir{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 0;border-top:1px solid var(--cizgi);
}
.bilgi-satir:first-of-type{border-top:none;padding-top:0}
.bilgi-satir .bs-ikon{
  width:42px;height:42px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--bakir-acik);color:var(--bakir);border:1px solid var(--bakir-kenar);
}
.bilgi-satir b{
  display:block;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--soluk);font-weight:700;margin-bottom:3px;
}
.bilgi-satir a,.bilgi-satir span{color:var(--murekkep);font-weight:600;font-size:.98rem}
.bilgi-satir a:hover{color:var(--bakir)}

.harita-kutu{
  border-radius:var(--r-l);overflow:hidden;border:1px solid var(--cizgi);
  box-shadow:var(--golge);margin-top:26px;
}
.harita-kutu iframe{width:100%;height:340px;border:0;display:block}

/* Konum bölümü — harita üzerine binen bilgi kartı */
.harita-bolum{background:var(--zemin);border-top:1px solid var(--cizgi);padding-bottom:0}
.harita-bolum .ust-etiket{margin-top:0}
.harita-sarici{position:relative;margin-top:28px}
.harita-yer,.harita-sarici iframe{
  width:100%;height:420px;border:0;display:grid;place-items:center;
  background:var(--zemin-2);gap:14px;text-align:center;padding:24px;cursor:pointer;
}
.harita-kart{
  position:absolute;top:26px;left:26px;z-index:5;max-width:330px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border:1px solid var(--cizgi);border-radius:var(--r-l);
  padding:24px;box-shadow:var(--golge-l);
}
.harita-kart h3{margin-bottom:8px}
.harita-kart p{font-size:.9rem;color:var(--soluk);margin-bottom:16px}
@media(max-width:760px){
  .harita-kart{position:static;max-width:none;margin:0 var(--bosluk) 16px;border-radius:var(--r-l)}
  .harita-yer,.harita-sarici iframe{height:320px}
}

/* ------------------------------------------------------ 18. CTA BANT ---- */
.cta-bant{
  background:linear-gradient(120deg,var(--lacivert-koyu),var(--lacivert) 55%,#15558A);
  color:#fff;text-align:center;position:relative;overflow:hidden;
}
.cta-bant::after{
  content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;
  background:repeating-linear-gradient(118deg,transparent 0 3px,#fff 3px 4px,transparent 4px 9px);
}
.cta-bant .kapsayici{position:relative;z-index:2}
.cta-bant h2{color:#fff;margin-bottom:12px}
.cta-bant p{color:#C3D6E8;font-size:1.06rem;margin-bottom:28px;max-width:60ch;margin-inline:auto}
.cta-dugmeler{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* Kurumsal vurgu kutusu */
.vurgu-kutu{
  background:var(--bakir-acik);border:1px solid var(--bakir-kenar);
  border-radius:var(--r-l);padding:clamp(22px,3vw,32px);
  display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.vurgu-kutu h3{margin-bottom:6px}
.vurgu-kutu p{color:var(--murekkep-2);font-size:.96rem;max-width:60ch}

/* ------------------------------------------------------- 19. KIRINTI ---- */
.kirinti{
  padding:16px 0;font-size:.85rem;color:var(--soluk);
  border-bottom:1px solid var(--cizgi);background:var(--zemin);
}
.kirinti ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.kirinti li{display:inline-flex;align-items:center;gap:8px}
.kirinti li::after{content:"›";color:var(--cizgi-koyu);font-weight:700}
.kirinti li:last-child::after{display:none}
.kirinti a{font-weight:600;transition:color .18s;display:inline-block;padding:4px 0}
.kirinti a:hover{color:var(--bakir)}
.kirinti .son{color:var(--murekkep);font-weight:700}

/* ------------------------------------------------------- 20. FOOTER ----- */
footer.site{background:var(--lacivert-koyu);color:#A9BFD4;padding-top:56px;font-size:.92rem}
footer.site .f-iz{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:38px;padding-bottom:42px;
}
footer.site h4,footer.site .f-baslik{
  color:#fff;font-size:.85rem;letter-spacing:.11em;text-transform:uppercase;
  margin-bottom:16px;font-weight:750;
}
footer.site li{margin-bottom:2px}
/* Dokunma hedefi en az 24px olmalı — dikey padding ile 28px'e çıkarılır */
footer.site li a{display:inline-block;padding:4px 0;transition:color .18s}
footer.site a{transition:color .18s}
footer.site a:hover{color:var(--bakir-acik)}
footer.site .f-logo{margin-bottom:16px;display:inline-block}
footer.site .f-logo img{width:220px;height:auto}
footer.site .f-tanim{font-size:.88rem;line-height:1.75;color:#93AAC1;max-width:42ch}

.f-sosyal{display:flex;gap:11px;align-items:center;flex-wrap:wrap;padding:20px 0;border-top:1px solid rgba(255,255,255,.1)}
.f-sosyal span{font-size:.85rem;color:#93AAC1}
.f-sosyal a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);color:#C7D8E8;transition:all .2s;
}
.f-sosyal a:hover{background:var(--bakir);border-color:var(--bakir);color:#fff;transform:translateY(-2px)}

.f-etiketler{padding:22px 0;border-top:1px solid rgba(255,255,255,.1)}
.f-etiketler h4,.f-etiketler .f-baslik{margin-bottom:12px}
.f-etiketler a{
  display:inline-block;margin:0 7px 8px 0;padding:5px 13px;
  border:1px solid rgba(255,255,255,.14);border-radius:50px;
  font-size:.8rem;color:#A9BFD4;transition:all .18s;
}
.f-etiketler a:hover{border-color:var(--bakir);color:var(--bakir-acik)}

/* SEO Partner — footer en altı */
.f-partner{padding:22px 0;border-top:1px solid rgba(255,255,255,.1)}
.f-partner-alt{font-size:.84rem;color:#8AA2BA;margin:-8px 0 14px}
.f-partner-liste{display:flex;flex-wrap:wrap;gap:10px}
.f-partner-liste li{margin:0}
/* Özgüllük notu: footer.site li a kuralını geçmek için tam seçici kullanılır */
footer.site .f-partner-liste li a{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 16px;border-radius:var(--r);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  transition:border-color .18s,background .18s;
}
footer.site .f-partner-liste li a:hover{border-color:var(--bakir);background:rgba(180,83,9,.14)}
.f-partner-liste strong{color:#E7EEF5;font-size:.9rem;font-weight:700}
.f-partner-liste span{color:#93AAC1;font-size:.8rem}
@media(max-width:600px){ .f-partner-liste a{width:100%} }

.f-alt{
  border-top:1px solid rgba(255,255,255,.1);padding:18px 0;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:.83rem;color:#8AA2BA;
}

/* ------------------------------------------------- 21. YÜZEN ÖĞELER ----- */
.wa-yuzen{
  position:fixed;right:20px;bottom:20px;z-index:70;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;color:#fff;
  box-shadow:0 8px 26px rgba(37,211,102,.45);
  transition:transform .2s, box-shadow .2s;
}
.wa-yuzen:hover{transform:scale(1.09);box-shadow:0 12px 32px rgba(37,211,102,.55)}
.wa-yuzen::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(37,211,102,.5);animation:halka 2.4s ease-out infinite;
}
@keyframes halka{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.35);opacity:0}}

.mobil-ara{display:none}

/* ------------------------------------------------------- 22. YARDIMCI -- */
.gizle{display:none!important}
.sadece-okuyucu{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.atla{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--bakir);color:#fff;padding:12px 20px;border-radius:0 0 var(--r) 0;font-weight:700;
}
.atla:focus{left:0}

/* ===================================================== 23. RESPONSIVE === */

/* Geniş tablet / küçük dizüstü */
@media(max-width:1100px){
  .metal-iz{grid-template-columns:repeat(4,1fr)}
  footer.site .f-iz{grid-template-columns:1.4fr 1fr 1fr;gap:30px}
  footer.site .f-iz>div:nth-child(4){grid-column:1/-1}
}

/* Menü kırılması */
@media(max-width:1000px){
  .menu{display:none}
  .hamburger{display:flex}
  .nav-sag .dugme span.tx{display:none}
  .nav-sag .dugme{padding:12px 15px}
}

/* Tablet */
@media(max-width:900px){
  .hero-iz{grid-template-columns:1fr;gap:36px}
  .iletisim-iz{grid-template-columns:1fr}
  .surec{grid-template-columns:1fr 1fr;gap:28px}
  .blog-iz{grid-template-columns:repeat(2,1fr)}
  .iz-3,.iz-4{grid-template-columns:repeat(2,1fr)}
  .metrik-iz{grid-template-columns:repeat(2,1fr)}
  .metrik:nth-child(3){border-left:none}
  .metrik:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
  .ust-serit .us-sag{display:none}
}

/* Küçük tablet / büyük telefon */
@media(max-width:760px){
  :root{--bosluk:18px}
  .metal-iz{grid-template-columns:repeat(3,1fr)}
  footer.site .f-iz{grid-template-columns:1fr 1fr}
  footer.site .f-iz>div:first-child{grid-column:1/-1}

  /* Fiyat tablosu — mobil kart görünümü */
  .ft-bas{display:none}
  .ft-satir{grid-template-columns:1fr auto;padding:14px 18px;gap:3px 12px}
  .ft-satir b{grid-column:1;grid-row:1}
  .ft-satir .ft-fiyat{grid-column:2;grid-row:1;align-self:center}
  .ft-satir .ft-acik{grid-column:1/-1;grid-row:2}
  .ft-satir .ft-birim{display:none}
  .ft-grup{padding:12px 18px}
}

/* Telefon */
@media(max-width:600px){
  body{font-size:15.5px}
  header.site nav{height:66px}
  .logo-isaret{width:40px;height:40px;border-radius:11px}
  .logo-yazi b{font-size:1.12rem}
  .logo-yazi small{font-size:.63rem}
  .mobil-menu{max-height:calc(100vh - 66px)}
  .blog-iz,.iz-2,.iz-3,.iz-4{grid-template-columns:1fr}
  .surec{grid-template-columns:1fr}
  .alan-ikili{grid-template-columns:1fr}
  .hesap-satir select,.hesap-satir input{min-width:100%}
  .vurgu-kutu{flex-direction:column;text-align:center}
  .hero-dugmeler .dugme{flex:1;min-width:100%}
  .ust-serit{display:none}

  /* Alt sabit arama çubuğu */
  .mobil-ara{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:65;
    background:var(--bakir);color:#fff;font-weight:750;font-size:1rem;
    align-items:center;justify-content:center;gap:10px;padding:15px;
    box-shadow:0 -4px 20px rgba(0,0,0,.18);
  }
  body{padding-bottom:56px}
  .wa-yuzen{bottom:70px;right:14px;width:52px;height:52px}
}

/* Çok küçük ekran */
@media(max-width:400px){
  .metal-iz{grid-template-columns:repeat(2,1fr)}
  .metrik-iz{grid-template-columns:1fr}
  .metrik{border-left:none;border-top:1px solid rgba(255,255,255,.12)}
  .metrik:first-child{border-top:none}
}

/* ---------------------------------------------------------- 24. BASKI -- */
@media print{
  .ust-serit,header.site,.ticker,.wa-yuzen,.mobil-ara,.cta-bant,footer.site,.hero-dugmeler{display:none!important}
  body{padding:0;font-size:12pt;color:#000}
  .kart,.fiyat-kutu{box-shadow:none;border:1px solid #ccc}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}