:root {
  --siyah: #141414;
  --kiremit: #B8441C;
  --kiremit-koyu: #7A2C10;
  --kiremit-acik: #F7E3D9;
  --zemin: #FAF6F2;
  --kart: #FFFFFF;
  --yazi: #1A1A1A;
  --yazi-2: #4A4541;
  --soluk: #6B6460;
  --cizgi: #E8E1DB;
  --yesil: #2F7D4F;
  --yesil-acik: #E6F2EA;
  --baslik: "Roboto Slab", Georgia, serif;
  --govde: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --genislik: 1120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
section[id], h2[id] { scroll-margin-top: 76px; }
body { background: var(--zemin); color: var(--yazi); font-family: var(--govde); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--baslik); line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: clamp(36px, 6vw, 60px); font-weight: 800; }
h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; }
h3 { font-size: 21px; font-weight: 700; }

.kap { max-width: var(--genislik); margin: 0 auto; padding: 0 20px; }
.ust-etiket { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kiremit); margin-bottom: 14px; }
.bolum { padding: 88px 0; }
.bolum-baslik { max-width: 680px; margin-bottom: 44px; }
.bolum-baslik p { color: var(--yazi-2); font-size: 18px; margin-top: 14px; }

/* Üst menü */
.menu { position: sticky; top: 0; z-index: 10; background: rgba(250, 246, 242, 0.92); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--cizgi); }
.menu .kap { display: flex; align-items: center; gap: 28px; height: 68px; }
.menu .logo img { height: 26px; width: auto; }
.menu nav { display: flex; gap: 24px; margin-left: auto; }
.menu nav a { text-decoration: none; font-weight: 600; font-size: 15.5px; color: var(--yazi-2); }
.menu nav a:hover { color: var(--kiremit); }
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 10px; font-weight: 700; font-size: 16px; text-decoration: none; border: 2px solid transparent; transition: transform .15s ease, background .15s ease; cursor: pointer; }
.dugme:active { transform: scale(0.98); }
.dugme-kiremit { background: var(--kiremit); color: #fff; }
.dugme-kiremit:hover { background: #A33B17; }
.dugme-cizgi { border-color: var(--siyah); color: var(--siyah); background: transparent; }
.dugme-cizgi:hover { background: var(--siyah); color: #fff; }
.menu .dugme { padding: 10px 18px; font-size: 15px; white-space: nowrap; }

/* Giriş */
.giris { padding: 72px 0 88px; overflow: hidden; }
.giris .kap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.giris h1 .vurgu { color: var(--kiremit); }
.giris p.alt { font-size: 20px; color: var(--yazi-2); margin: 22px 0 32px; max-width: 540px; }
.magazalar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.magaza { display: inline-flex; align-items: center; gap: 10px; background: var(--siyah); color: #fff; border-radius: 12px; padding: 10px 18px; text-decoration: none; min-width: 180px; }
.magaza svg { width: 26px; height: 26px; flex: none; }
.magaza small { display: block; font-size: 11.5px; opacity: .75; line-height: 1.2; }
.magaza b { display: block; font-size: 17px; line-height: 1.2; }
.toptanci-bag { display: inline-block; margin-top: 22px; font-weight: 700; color: var(--kiremit); text-decoration: none; }
.toptanci-bag:hover { text-decoration: underline; }

/* Telefon çizimi */
.telefon { width: 100%; max-width: 340px; margin: 0 auto; background: var(--siyah); border-radius: 44px; padding: 12px; box-shadow: 0 30px 60px -20px rgba(20, 20, 20, .35); }
.ekran { background: var(--zemin); border-radius: 34px; overflow: hidden; padding: 22px 16px 18px; min-height: 560px; }
.ekran-ust { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ekran-ust b { font-family: var(--baslik); font-size: 20px; }
.ekran-ust span { font-size: 12px; font-weight: 700; color: var(--kiremit-koyu); background: var(--kiremit-acik); padding: 4px 10px; border-radius: 6px; }
.ekran-liste { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.ekran-liste small { color: var(--soluk); font-weight: 600; font-size: 12.5px; }
.ekran-liste div { font-weight: 800; font-size: 16px; margin-top: 2px; }
.teklif { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.teklif.secili { border: 2px solid var(--kiremit); }
.teklif .ad { font-weight: 700; font-size: 14.5px; }
.teklif .puan { color: var(--soluk); font-size: 12.5px; font-weight: 600; }
.teklif .fiyat { font-family: var(--baslik); font-weight: 800; font-size: 19px; color: var(--kiremit-koyu); white-space: nowrap; margin-left: 10px; }
.etiket-enucuz { white-space: nowrap; display: inline-block; font-size: 11px; font-weight: 800; color: var(--kiremit-koyu); background: var(--kiremit-acik); padding: 2px 7px; border-radius: 5px; margin-left: 6px; vertical-align: 2px; }
.ekran-not { display: flex; gap: 8px; align-items: center; background: #F3EEE9; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; font-weight: 600; color: var(--yazi-2); margin-top: 6px; }
.ekran-dugme { margin-top: 14px; background: var(--kiremit); color: #fff; text-align: center; font-weight: 800; padding: 13px; border-radius: 12px; }

/* Güven şeridi */
.serit { background: var(--siyah); color: #fff; }
.serit .kap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-top: 28px; padding-bottom: 28px; }
.serit div { display: flex; gap: 12px; align-items: center; font-weight: 600; font-size: 15.5px; }
.serit svg { width: 26px; height: 26px; flex: none; color: #E9875F; }

/* Özellikler */
.ozellikler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ozellik { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 18px; padding: 26px; }
.ozellik svg { width: 42px; height: 42px; padding: 9px; border-radius: 12px; background: var(--kiremit-acik); color: var(--kiremit); margin-bottom: 16px; }
.ozellik b { display: block; font-family: var(--baslik); font-size: 20px; line-height: 1.25; margin-bottom: 8px; }
.ozellik span { color: var(--yazi-2); font-size: 16px; }
#nasil { padding-top: 0; }

/* Nasıl çalışır */
.iki-sutun { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.yol { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 20px; padding: 32px; }
.yol h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.yol h3 .rozet { font-family: var(--govde); font-size: 12.5px; font-weight: 800; letter-spacing: .04em; padding: 4px 10px; border-radius: 6px; background: var(--kiremit-acik); color: var(--kiremit-koyu); }
.yol.koyu .rozet { background: var(--siyah); color: #fff; }
.adim { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--cizgi); }
.adim:first-of-type { border-top: 0; }
.adim .no { width: 40px; height: 40px; border-radius: 50%; background: var(--kiremit); color: #fff; display: grid; place-items: center; font-family: var(--baslik); font-weight: 800; font-size: 18px; }
.yol.koyu .adim .no { background: var(--siyah); }
.adim b { display: block; font-size: 17.5px; }
.adim span { color: var(--yazi-2); font-size: 16px; }

/* Fiyat gizliliği */
.gizli { background: var(--siyah); color: #fff; }
.gizli .kap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.gizli .ust-etiket { color: #E9875F; }
.gizli p.giris-yazi { color: #CFC8C2; font-size: 18px; margin-top: 16px; }
.madde { display: flex; gap: 14px; padding: 18px 0; border-top: 1px solid #2E2A27; }
.madde:first-child { border-top: 0; }
.madde svg { width: 24px; height: 24px; flex: none; color: #E9875F; margin-top: 2px; }
.madde b { display: block; font-size: 17.5px; }
.madde span { color: #CFC8C2; font-size: 16px; }
.filigran-kart { position: relative; background: #1F1D1B; border: 1px solid #2E2A27; border-radius: 20px; padding: 26px; overflow: hidden; }
.filigran-kart .satir { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid #2E2A27; font-weight: 600; }
.filigran-kart .satir:first-of-type { border-top: 0; }
.filigran-kart .satir b { font-family: var(--baslik); color: #F2B497; }
.filigran-kart .baslik { font-family: var(--baslik); font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.filigran-yazi { position: absolute; inset: -40%; display: flex; flex-wrap: wrap; align-content: center; gap: 26px 40px; transform: rotate(-24deg); pointer-events: none; color: rgba(255, 255, 255, .07); font-weight: 700; font-size: 14px; white-space: nowrap; }

/* Spot Pazar */
.spot .kap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.spot-kartlar { display: grid; gap: 14px; }
.spot-kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 18px; padding: 18px; }
.spot-kart.one { border: 2.5px solid var(--kiremit); }
.spot-kart .rozetler { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.spot-kart .rozetler span { font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 6px; background: var(--kiremit-acik); color: var(--kiremit-koyu); }
.spot-kart .rozetler span.dolu { background: var(--kiremit); color: #fff; }
.spot-kart .ust { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.spot-kart .urun { font-weight: 800; font-size: 17px; }
.spot-kart .fiyat { font-family: var(--baslik); font-weight: 800; font-size: 22px; white-space: nowrap; }
.spot-kart .fiyat small { font-family: var(--govde); font-size: 13px; color: var(--soluk); font-weight: 600; }
.cubuk { height: 7px; background: #EFE8E1; border-radius: 4px; margin: 12px 0 8px; overflow: hidden; }
.cubuk i { display: block; height: 100%; background: var(--kiremit); border-radius: 4px; }
.spot-kart .alt { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; color: var(--soluk); }
.spot-kart .alt .satildi { color: var(--kiremit); }
.spot-liste { margin-top: 26px; display: grid; gap: 14px; }
.spot-liste li { list-style: none; display: flex; gap: 12px; }
.spot-liste li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kiremit); margin-top: 10px; flex: none; }

/* Toptancı çağrısı */
.cagri { background: var(--kiremit); color: #fff; border-radius: 28px; padding: 56px; display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 32px; align-items: center; }
.cagri p { font-size: 18.5px; margin-top: 14px; color: #FBE7DE; }
.cagri .dugme { background: #fff; color: var(--kiremit-koyu); justify-self: end; }
.cagri .dugme:hover { background: var(--siyah); color: #fff; }

/* SSS */
.sss { max-width: 820px; }
.sss details { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; margin-bottom: 12px; }
.sss summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; font-weight: 700; font-size: 17.5px; position: relative; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 400; color: var(--kiremit); }
.sss details[open] summary::after { content: "–"; }
.sss details p { padding: 0 22px 20px; color: var(--yazi-2); }

/* Altbilgi */
footer { background: var(--siyah); color: #CFC8C2; padding: 56px 0 36px; margin-top: 24px; }
footer .kap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
footer img { height: 26px; width: auto; margin-bottom: 14px; }
footer h4 { color: #fff; font-size: 15px; margin-bottom: 12px; }
footer a { text-decoration: none; display: block; margin-bottom: 8px; }
footer a:hover { color: #fff; }
footer .telif { grid-column: 1 / -1; border-top: 1px solid #2E2A27; padding-top: 22px; margin-top: 14px; font-size: 14px; }

/* Yazı sayfası (gizlilik) */
.yazi-sayfa { max-width: 780px; padding-top: 56px; }
.yazi-sayfa h1 { font-size: clamp(32px, 5vw, 44px); margin-bottom: 8px; }
.yazi-sayfa .tarih { color: var(--soluk); font-weight: 600; margin-bottom: 32px; }
.yazi-sayfa h2 { font-size: 24px; margin: 36px 0 12px; }
.yazi-sayfa p, .yazi-sayfa li { color: var(--yazi-2); margin-bottom: 12px; }
.yazi-sayfa ul { padding-left: 22px; }
.yazi-sayfa .not { background: var(--kiremit-acik); color: var(--kiremit-koyu); border-radius: 12px; padding: 14px 18px; font-weight: 600; }

/* Telefon ve tablet */
@media (max-width: 900px) {
  .menu nav { display: none; }
  .menu .dugme { margin-left: auto; }
  .giris { padding-top: 44px; }
  .giris .kap, .gizli .kap, .spot .kap, .iki-sutun { grid-template-columns: 1fr; }
  .ozellikler { grid-template-columns: 1fr 1fr; }
  .serit .kap { grid-template-columns: 1fr 1fr; }
  .cagri { grid-template-columns: 1fr; padding: 36px 26px; }
  .cagri .dugme { justify-self: start; }
  footer .kap { grid-template-columns: 1fr; }
  .bolum { padding: 64px 0; }
  .spot-kartlar { order: 2; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .serit .kap { grid-template-columns: 1fr; }
  .ozellikler { grid-template-columns: 1fr; }
  .ozellik { padding: 22px; }
  .yol { padding: 24px 20px; }
  .magaza { flex: 1 1 0; min-width: 0; padding: 10px 12px; }
  .magaza b { font-size: 15.5px; }
  .teklif .ad { font-size: 13.5px; }
  .teklif .fiyat { font-size: 17px; }
  .telefon { max-width: 300px; }
  .ekran { min-height: 0; }
}