/* ============================================================
   Derman Ticaret — ortak stil
   Renkler tek yerden yönetilir: paleti değiştirmek için
   aşağıdaki :root bloğundaki değerleri değiştirmek yeterlidir.
   ============================================================ */

:root{
  --lacivert:      #16304B;
  --lacivert-koyu: #0F2437;
  --amber:         #DE8A1C;
  --amber-koyu:    #B86D0E;
  --krem:          #F5F1E8;
  --kagit:         #FBFAF7;
  --murekkep:      #1C1C1C;
  --gri:           #5F6A73;
  --gri-acik:      #8A939B;
  --cizgi:         #E3DED3;

  --serif: Georgia, "Times New Roman", "Nimbus Roman", serif;
  --sans:  "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --en: 1120px;          /* içerik genişliği */
  --bosluk: 16px;
}

@media(min-width:600px){ :root{ --bosluk:24px } }

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--kagit);
  color:var(--murekkep);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
}

img,svg{ max-width:100%; height:auto; display:block }

a{ color:var(--lacivert); text-decoration-color:var(--amber); text-underline-offset:3px }
a:hover{ color:var(--amber-koyu) }

h1,h2,h3{ font-family:var(--serif); line-height:1.2; margin:0 0 .5em; font-weight:700 }
h1{ font-size:clamp(30px, 5vw, 46px); letter-spacing:-.015em }
h2{ font-size:clamp(23px, 3.2vw, 31px) }
h3{ font-size:19px }
p{ margin:0 0 1em }

.kap{ max-width:var(--en); margin:0 auto; padding:0 var(--bosluk) }

/* görsel olarak gizli ama ekran okuyucuya açık */
.gizli{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Üst bar ---------- */

.atla{
  position:absolute; left:-9999px; top:0; background:var(--amber); color:var(--lacivert-koyu);
  padding:10px 16px; font-weight:700; z-index:100;
}
.atla:focus{ left:8px; top:8px }

.ustbar{ background:var(--lacivert); color:var(--krem); position:sticky; top:0; z-index:50 }
.ustbar .kap{ display:flex; align-items:center; gap:16px; min-height:86px; flex-wrap:wrap }

.marka{ display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit; padding:8px 0 }
/* Tam logo kullanıldığı için yeterince büyük olmalı: BABAESKİ ve 1979 satırları
   bu boyutun altında lekeye dönüşüyor. */
.marka img{ width:52px; height:57px; flex:none }
.marka .ad{ font-family:var(--serif); font-weight:700; font-size:20px; letter-spacing:.03em; line-height:1 }
.marka .slogan{ display:block; font-size:9.5px; letter-spacing:.26em; color:var(--amber);
                font-weight:700; margin-top:5px; font-family:var(--sans) }

.menu{ display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; list-style:none; padding:0 }
.menu a{
  display:block; padding:9px 12px; color:var(--krem); text-decoration:none;
  font-size:15px; border-radius:6px; white-space:nowrap;
}
.menu a:hover{ background:rgba(255,255,255,.09); color:#fff }
.menu a[aria-current="page"]{ background:rgba(255,255,255,.13); color:#fff; font-weight:600 }

.ustbar-tel{
  display:inline-flex; align-items:center; gap:8px; background:var(--amber);
  color:var(--lacivert-koyu); font-weight:700; text-decoration:none;
  padding:10px 15px; border-radius:7px; font-size:15px; white-space:nowrap;
}
.ustbar-tel:hover{ background:#F0A02F; color:var(--lacivert-koyu) }

/* ---------- Kahraman ---------- */

.kahraman{
  background:var(--lacivert-koyu); color:var(--krem);
  padding:clamp(52px, 8vw, 92px) 0;
  border-bottom:5px solid var(--amber);
}
.kahraman .rozet{
  display:inline-block; border:1.5px solid rgba(222,138,28,.55); color:var(--amber);
  padding:6px 15px; border-radius:99px; font-size:12.5px; font-weight:700;
  letter-spacing:.18em; margin-bottom:22px;
}
.kahraman h1{ color:#fff; max-width:17ch; margin-bottom:.35em }
.kahraman h1 em{ color:var(--amber); font-style:normal }
.kahraman .giris{ font-size:clamp(17px, 2.1vw, 20px); max-width:56ch; color:rgba(245,241,232,.85) }

.eylemler{ display:flex; gap:12px; flex-wrap:wrap; margin-top:32px }
.dugme{
  display:inline-flex; align-items:center; gap:9px; padding:14px 24px; border-radius:8px;
  font-weight:700; text-decoration:none; font-size:16px; border:2px solid transparent;
}
.dugme-ana{ background:var(--amber); color:var(--lacivert-koyu) }
.dugme-ana:hover{ background:#F0A02F; color:var(--lacivert-koyu) }
.dugme-ikinci{ border-color:rgba(245,241,232,.4); color:var(--krem) }
.dugme-ikinci:hover{ border-color:var(--krem); background:rgba(255,255,255,.07); color:#fff }

/* ---------- Sayıların şeridi ---------- */

.sayilar{ background:var(--lacivert); color:var(--krem); padding:26px 0 }
.sayilar ul{ list-style:none; margin:0; padding:0; display:grid; gap:18px;
             grid-template-columns:repeat(auto-fit, minmax(min(180px,100%), 1fr)); text-align:center }
.sayilar .buyuk{ font-family:var(--serif); font-size:33px; font-weight:700; color:var(--amber); line-height:1 }
.sayilar .kucuk{ font-size:13.5px; letter-spacing:.08em; color:rgba(245,241,232,.75); margin-top:7px }

/* ---------- Bölümler ---------- */

.bolum{ padding:clamp(48px, 7vw, 78px) 0 }
.bolum-krem{ background:#fff; border-top:1px solid var(--cizgi); border-bottom:1px solid var(--cizgi) }

.bolum-bas{ max-width:60ch; margin-bottom:38px }
.bolum-bas .etiket{
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.18em;
  color:var(--amber-koyu); margin-bottom:10px;
}
.bolum-bas p{ color:var(--gri); font-size:17px; margin-bottom:0 }

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

.izgara{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(min(255px,100%), 1fr)) }

.kart{
  background:#fff; border:1px solid var(--cizgi); border-radius:10px; padding:24px 22px;
  border-top:3px solid var(--amber);
}
.bolum-krem .kart{ background:var(--kagit) }
.kart h3{ margin-bottom:.4em; font-size:19.5px }
.kart ul{ margin:0; padding-left:19px; color:var(--gri); font-size:15.5px; line-height:1.75 }
.kart li{ margin-bottom:2px }

/* ---------- Marka listesi ---------- */

.markalar{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px }
.markalar li{
  background:#fff; border:1px solid var(--cizgi); border-radius:7px;
  padding:11px 18px; font-weight:600; font-size:15.5px; color:var(--lacivert);
}
.bolum-krem .markalar li{ background:var(--kagit) }

/* ---------- Marka logoları ----------
   Logolar farklı oran ve arka planda geliyor. Eşit yükseklikte beyaz
   kartlara oturtulur, görsel `contain` ile kutuya sığdırılır; böylece
   hiçbiri bozulmaz ve ızgara düzenli görünür. */

.logo-izgara{
  list-style:none; margin:0; padding:0; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(min(158px,100%), 1fr));
}
.logo-izgara li{
  background:#fff; border:1px solid var(--cizgi); border-radius:9px;
  height:104px; display:grid; place-items:center; padding:14px;
}
.bolum-krem .logo-izgara li{ background:#fff }
.logo-izgara img{ max-width:100%; max-height:60px; width:auto; object-fit:contain }

.logo-not{ margin-top:22px; color:var(--gri); font-size:14px; max-width:78ch }

/* ---------- İki sütun ---------- */

.ikili{ display:grid; gap:42px; grid-template-columns:1fr }
@media(min-width:860px){ .ikili{ grid-template-columns:1.15fr .85fr; gap:56px } }

/* ---------- İletişim kutusu ---------- */

.bilgi{ list-style:none; margin:0; padding:0 }
.bilgi li{ display:flex; gap:14px; padding:15px 0; border-bottom:1px solid var(--cizgi) }
.bilgi li:last-child{ border-bottom:0 }
.bilgi .baslik{ font-weight:700; min-width:104px; flex:none; font-size:15px }
.bilgi .deger{ color:var(--gri) }
.bilgi .deger a{ font-weight:600 }

.saatler{ width:100%; border-collapse:collapse; font-size:15.5px }
.saatler th,.saatler td{ text-align:left; padding:10px 0; border-bottom:1px solid var(--cizgi) }
.saatler th{ font-weight:600 }
.saatler td{ color:var(--gri); text-align:right }
.saatler tr:last-child th,.saatler tr:last-child td{ border-bottom:0 }

/* ---------- Alt bilgi ---------- */

.altbilgi{ background:var(--lacivert-koyu); color:rgba(245,241,232,.72); padding:52px 0 30px; font-size:15px }
.altbilgi a{ color:rgba(245,241,232,.72); text-decoration:none }
.altbilgi a:hover{ color:var(--amber) }
/* İlk sütun geniş: logo + firma metni yan yana durur.
   Kalan üç sütun eşit ve doğal olarak sağa kayar. */
.altbilgi .ust{ display:grid; gap:34px; grid-template-columns:1.7fr 1fr 1fr 1fr; margin-bottom:36px }
@media(max-width:1000px){ .altbilgi .ust{ grid-template-columns:1fr 1fr } }
@media(max-width:599px){ .altbilgi .ust{ grid-template-columns:1fr; gap:28px } }

.altbilgi .alt-marka{ display:flex; gap:18px; align-items:flex-start }
.altbilgi .alt-marka img{ width:84px; height:92px; flex:none }
.altbilgi .alt-marka p{ max-width:38ch }
@media(max-width:1000px){ .altbilgi .alt-marka{ grid-column:1 / -1 } }
.altbilgi h3{ color:var(--krem); font-size:16px; margin-bottom:14px; font-family:var(--sans); font-weight:700;
              letter-spacing:.05em }
.altbilgi ul{ list-style:none; margin:0; padding:0 }
.altbilgi li{ margin-bottom:8px }
.altbilgi .alt{ border-top:1px solid rgba(245,241,232,.13); padding-top:22px;
                display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:13.5px }
.altbilgi .imza a{ color:var(--amber) }

/* ---------- Sayfa başlığı (iç sayfalar) ---------- */

.sayfabas{ background:var(--lacivert); color:var(--krem); padding:clamp(38px,5vw,58px) 0;
           border-bottom:4px solid var(--amber) }
.sayfabas h1{ color:#fff; margin-bottom:.25em }
.sayfabas p{ color:rgba(245,241,232,.8); max-width:60ch; margin-bottom:0 }

/* ---------- Dar ekran ---------- */

@media(max-width:599px){
  body{ font-size:16px }
  .ustbar .kap{ min-height:0; padding-top:10px; padding-bottom:12px; gap:10px }
  .marka{ padding:4px 0 }
  .marka img{ width:50px; height:55px }
  .marka .ad{ font-size:18px }
  .ustbar nav{ width:100% }          /* nav'a sınır verilmezse menü sayfayı yatayda taşırır */
  .menu{ margin-left:0; width:100%; gap:2px }
  .menu a{ padding:8px 11px; font-size:14.5px }
  .ustbar-tel{ width:100%; justify-content:center }
  .eylemler{ flex-direction:column; align-items:stretch }
  .dugme{ justify-content:center; text-align:center }
  .sayilar .buyuk{ font-size:29px }
  .kart{ padding:20px 18px }
  .bilgi .baslik{ min-width:84px }
}

/* ---------- Yazdırma ---------- */

@media print{
  .ustbar,.altbilgi,.eylemler{ display:none }
  body{ background:#fff; font-size:12pt }
}