/* =====================================================================
   SEVİLEN KUYUMCULUK — STİL
   İki tema:
     Açık (varsayılan) : beyaz zemin, zümrüt mürekkep, antik altın
     Koyu             : koyu zümrüt zemin, fildişi yazı, altın vurgu
   Tema <html data-tema="acik|koyu"> ile seçilir; renklerin hepsi
   aşağıdaki değişkenlerden gelir.
   Yazı: Bodoni Moda (logo, başlıklar) + Manrope (metin, tablo, saat).
   Sade fiyat panosu düzeni: üst çubuk, tek fiyat tablosu, iletişim.
   ===================================================================== */

:root {
  color-scheme: light;

  --zemin:          #FFFFFF;   /* beyaz */
  --zemin-derin:    #F6F6F3;   /* hesaplama ve alt bilgi bandı */
  --panel:          #FFFFFF;   /* tablolar, kartlar */
  --panel-giris:    #F7F7F4;   /* form alanları */

  --yazi:           #14261F;   /* zümrüde çalan koyu mürekkep */
  --yazi-2:         #4B5C54;
  --yazi-3:         #56635A;

  --altin:          #B08A45;   /* çizgi ve süs */
  --altin-yazi:     #85601F;   /* küçük altın yazılar */
  --vurgu:          #80591A;   /* satış rakamları */
  --vurgu-buyuk:    #9A7029;   /* büyük italik başlık vurgusu */

  --dugme-1:        #17493B;
  --dugme-2:        #0B2A22;
  --dugme-yazi:     #FFFFFF;
  --dugme-golge:    rgba(11, 42, 34, 0.28);

  --cizgi:          rgba(160, 120, 50, 0.26);
  --cizgi-guclu:    rgba(160, 120, 50, 0.55);
  --cizgi-yumusak:  rgba(20, 38, 31, 0.09);
  --uzerine:        rgba(160, 120, 50, 0.08);
  --satir-uzerine:  rgba(20, 38, 31, 0.03);

  --yukari:         #1B7547;
  --asagi:          #AE3F2D;
  --uyari:          #8C5F0E;
  --yukari-zemin:   rgba(27, 117, 71, 0.10);
  --asagi-zemin:    rgba(174, 63, 45, 0.10);
  --uyari-zemin:    rgba(140, 95, 14, 0.09);
  /* Yukarıdaki renklerin "kırmızı, yeşil, mavi" hali (saydam tonlar için;
     color-mix() eski tarayıcılarda çalışmıyor). Rengi değiştirirseniz bunu da. */
  --yukari-rgb:     27, 117, 71;
  --asagi-rgb:      174, 63, 45;
  --uyari-rgb:      140, 95, 14;
  --vurgu-rgb:      128, 89, 26;

  --ust-zemin:      rgba(255, 255, 255, 0.86);
  --giris-isik:     rgba(176, 138, 69, 0.11);
  --giris-golge:    rgba(20, 38, 31, 0.03);
  --golge:          0 30px 60px -32px rgba(16, 32, 26, 0.24), 0 1px 3px rgba(16, 32, 26, 0.05);
  --harita-filtre:  grayscale(0.2);
  --secim:          rgba(176, 138, 69, 0.28);

  /* Arka plandaki giyoş deseni (js/site.js okur): renk ve yoğunluk */
  --giyos-renk:     150, 108, 40;
  --giyos-guc:      1;


  --font-baslik: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", Georgia, serif;
  --font-govde:  "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --kenar: 6px;
}

:root[data-tema="koyu"] {
  color-scheme: dark;

  --zemin:          #0B2A22;
  --zemin-derin:    #071E18;
  --panel:          #0F3329;
  --panel-giris:    #144036;

  --yazi:           #F1EADB;
  --yazi-2:         #A9BAAF;
  --yazi-3:         #86A093;

  --altin:          #C9A55C;
  --altin-yazi:     #C9A55C;
  --vurgu:          #E3C88C;
  --vurgu-buyuk:    #E3C88C;

  --dugme-1:        #E3C88C;
  --dugme-2:        #C9A55C;
  --dugme-yazi:     #1D160A;
  --dugme-golge:    rgba(201, 165, 92, 0.5);

  --cizgi:          rgba(201, 165, 92, 0.22);
  --cizgi-guclu:    rgba(201, 165, 92, 0.48);
  --cizgi-yumusak:  rgba(241, 234, 219, 0.08);
  --uzerine:        rgba(201, 165, 92, 0.06);
  --satir-uzerine:  rgba(241, 234, 219, 0.025);

  --yukari:         #7FD8A4;
  --asagi:          #EF8F80;
  --uyari:          #E9B85C;
  --yukari-zemin:   rgba(127, 216, 164, 0.10);
  --asagi-zemin:    rgba(239, 143, 128, 0.12);
  --uyari-zemin:    rgba(233, 184, 92, 0.10);
  --yukari-rgb:     127, 216, 164;
  --asagi-rgb:      239, 143, 128;
  --uyari-rgb:      233, 184, 92;
  --vurgu-rgb:      227, 200, 140;

  --ust-zemin:      rgba(11, 42, 34, 0.84);
  --giris-isik:     rgba(201, 165, 92, 0.12);
  --giris-golge:    rgba(3, 15, 12, 0.55);
  --golge:          0 40px 80px -40px rgba(0, 0, 0, 0.7), 0 2px 0 rgba(241, 234, 219, 0.03) inset;
  --harita-filtre:  grayscale(0.35) contrast(1.05);
  --secim:          rgba(201, 165, 92, 0.35);

  --giyos-renk:     201, 165, 92;
  --giyos-guc:      0.8;

}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}

/* Tema değişirken renkler yumuşakça geçsin (yalnızca düğmeye basınca) */
html.tema-gecis,
html.tema-gecis *,
html.tema-gecis *::before,
html.tema-gecis *::after {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, fill 0.35s ease, stroke 0.35s ease !important;
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--yazi);
  font: 400 16px/1.6 var(--font-govde);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--secim); }

/* hidden özniteliği, display verilmiş öğelerde de gizlesin */
[hidden] { display: none !important; }

a { color: inherit; }
p { margin: 0; }
button { font: inherit; color: inherit; }

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

.kap {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}
/* Geniş ekranlarda içerik alanı da genişlesin, yanlar boş kalmasın */
@media (min-width: 1360px) { .kap { max-width: 1240px; } }
@media (min-width: 1700px) { .kap { max-width: 1440px; } }

/* Fiyat ekranı (üst menü + fiyat panosu) büyük ve geniş ekranlarda — dükkân
   televizyonu, geniş monitör — kenarlara otursun, sağda solda boşluk kalmasın.
   Alt bölümler (iletişim, dipnot) okunur genişlikte kalır. */
@media (min-width: 900px) {
  .bant .bant-ic,
  .pano .pano-ic { max-width: 1840px; }
}

.atla {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: 4px;
  background: var(--dugme-2);
  color: var(--dugme-yazi);
  font-weight: 600;
  text-decoration: none;
}
.atla:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

/* ---------- Tipografi ---------- */

h1, h2 {
  font-family: var(--font-baslik);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
  /* Bodoni büyük boyda ince çizgileri çok inceltir; 1x ekranlarda okunsun */
  font-variation-settings: "opsz" 36;
}
h1 em, h2 em { font-style: italic; color: var(--vurgu-buyuk); }

h1 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
h2 {
  font-size: clamp(28px, 3.6vw, 38px);
  line-height: 1.1;
}

.ust-baslik {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--altin-yazi);
}
.ust-baslik::before {
  content: "";
  flex: none;
  width: 24px;
  height: 1px;
  background: var(--altin);
}

/* ---------- Düğmeler ---------- */

.dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding-inline: 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.dugme:hover { transform: translateY(-1px); }

.dugme-ana {
  background: linear-gradient(180deg, var(--dugme-1), var(--dugme-2));
  color: var(--dugme-yazi);
  box-shadow: 0 10px 26px -14px var(--dugme-golge);
}
.dugme-cizgi {
  border: 1px solid var(--cizgi-guclu);
  color: var(--yazi);
}
.dugme-cizgi:hover { border-color: var(--altin); background: var(--uzerine); }

.yuvarlak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--cizgi-guclu);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.yuvarlak:hover { border-color: var(--altin); background: var(--uzerine); }
.yuvarlak svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--altin-yazi);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tema-dugme .ikon-gunes { display: none; }
[data-tema="koyu"] .tema-dugme .ikon-ay { display: none; }
[data-tema="koyu"] .tema-dugme .ikon-gunes { display: block; }

/* ---------- Üst bant ----------
   Koyu zümrüt zemin, altın yazı: logo, selam ve tarih, saat (arkasında çok yavaş
   dönen giyoş kadranı), fiyat durumu ve düğmeler. İki temada da koyudur; içindeki
   öğeler aşağıdaki renkleri kullanır. */

.bant {
  --yazi:          #F1EADB;
  --yazi-2:        #CBD6CF;
  --yazi-3:        #9DB3A7;
  --altin:         #C9A55C;
  --altin-yazi:    #D8BB7C;
  --cizgi:         rgba(201, 165, 92, 0.3);
  --cizgi-guclu:   rgba(201, 165, 92, 0.5);
  --cizgi-yumusak: rgba(241, 234, 219, 0.1);
  --uzerine:       rgba(201, 165, 92, 0.12);
  --yukari:        #7FD8A4;
  --yukari-zemin:  rgba(127, 216, 164, 0.13);
  --yukari-rgb:    127, 216, 164;
  --asagi:         #EF8F80;
  --asagi-zemin:   rgba(239, 143, 128, 0.15);
  --uyari:         #E9B85C;
  --uyari-zemin:   rgba(233, 184, 92, 0.13);
  --bant-giyos:    221, 191, 132;   /* kadranın rengi (js/site.js okur) */
  --bant-giyos-guc: 1;

  position: relative;
  overflow: hidden;
  color: var(--yazi);
  background:
    radial-gradient(55% 160% at 50% 0%, rgba(201, 165, 92, 0.1), transparent 70%),
    linear-gradient(180deg, #154638 0%, #0B2A22 100%);
  border-bottom: 1px solid rgba(201, 165, 92, 0.55);
}
:root[data-tema="koyu"] .bant {
  background:
    radial-gradient(55% 160% at 50% 0%, rgba(201, 165, 92, 0.08), transparent 70%),
    linear-gradient(180deg, #0A2620 0%, #061A15 100%);
}
.bant-desen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}

.bant-ic {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "logo orta saat araclar";
  align-items: center;
  gap: 10px clamp(18px, 2.6vw, 44px);
  min-height: clamp(78px, 12vh, 124px);
  padding-block: clamp(8px, 1.3vh, 16px);
}

.logo {
  grid-area: logo;
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}
.logo-ad {
  font-family: var(--font-baslik);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--yazi);
}
.logo-alt {
  margin-top: 5px;
  padding-left: 2px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: var(--altin-yazi);
}
/* Mobil dışı (bilgisayar, tablet, TV) görünümlerde logo biraz daha büyük */
@media (min-width: 900px) {
  .logo-ad { font-size: clamp(30px, 4.4vh, 40px); }
  .logo-alt { font-size: clamp(9px, 1.2vh, 11px); }
}

/* Ortada: selam ve tarih, bugünkü çalışma saati */
.bant-orta { grid-area: orta; min-width: 0; text-align: center; }
.selam {
  font-family: var(--font-baslik);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 2.7vh, 27px);
  line-height: 1.15;
  color: #E3C88C;
}
.gun-bilgi {
  margin-top: 4px;
  font-size: clamp(12px, 1.5vh, 14px);
  line-height: 1.4;
  color: var(--yazi-3);
}
.gun-bilgi #bugun-acik::before { content: " · "; }
.gun-bilgi b { font-weight: 600; color: var(--yazi-2); }

/* Saat: büyük ve ince, saniye küçük ve altın; altında fiyat durumu */
.saat-kutu {
  grid-area: saat;
  display: grid;
  justify-items: center;
  gap: 6px;
}
.saat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: clamp(34px, 6.2vh, 64px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--yazi);
}
.saat small {
  min-width: 2ch;
  font-size: 0.4em;
  font-weight: 600;
  color: var(--altin-yazi);
}
.saat-alt {
  display: inline-flex;
  align-items: center;
  gap: 4px 12px;
}
.saat-kutu .durum { margin-top: 0; }

.ust-sag {
  grid-area: araclar;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Arama düğmesi bantta altın */
.ust-ara {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding-inline: 15px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #EBD39E, #C9A55C);
  color: #1D160A;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 24px -14px rgba(201, 165, 92, 0.9);
  transition: filter 0.2s ease;
}
.ust-ara:hover { filter: brightness(1.06); }
.ust-ara svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.ust-ara-kisa { display: none; }
@media (max-width: 480px) {
  .ust-ara-no { display: none; }
  .ust-ara-kisa { display: inline; }
}

/* Telefon ve dar ekran: üstte logo ve düğmeler, altta saat ve durum */
@media (max-width: 899px) {
  .bant-ic {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "logo araclar" "saat saat";
    gap: 8px 12px;
    min-height: 0;
    padding-block: 10px 12px;
  }
  .bant-orta { display: none; }
  .saat-kutu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .saat { font-size: clamp(36px, 11vw, 46px); }
  .saat-alt { flex-direction: column; align-items: flex-end; }
}

/* ---------- Fiyat panosu ----------
   Amaç: bütün fiyatlar kaydırmadan tek ekranda görünsün. Boşluklar ve
   yazı boyutları ekran yüksekliğine (vh) göre ölçeklenir. */

.pano {
  position: relative;
  overflow: hidden;
  padding-block: clamp(6px, 1.4vh, 28px) clamp(24px, 4vh, 48px);
  background: radial-gradient(900px 360px at 50% 0%, var(--giris-isik), transparent 70%), var(--zemin);
}

/* Saat kadranı / banknot oymalarını andıran yumuşak arka plan deseni. Her kadran kendi
   kare tuvalinde çizilir (js/site.js → giyosCiz) ve çok yavaş döner: sağ üstteki saat
   yönünde, sol alttaki ters yönde. Dönüşü CSS yapar (ekran kartı; sayfayı yormaz). */
.giyos {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}
.giyos canvas,
.bant-desen canvas {
  position: absolute;
  opacity: 0;
  transition: opacity 1.8s ease;
  animation: giyos-don 240s linear infinite;
  will-change: transform;
}
.giyos canvas.hazir,
.bant-desen canvas.hazir { opacity: 1; }
.giyos canvas + canvas { animation-duration: 300s; animation-direction: reverse; }
@keyframes giyos-don { to { transform: rotate(360deg); } }
.pano-ic { position: relative; }

/* Fiyat tablosunun hemen üstünde, ortada: firma adı ve altında imza */
.pano-imza {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin-bottom: clamp(6px, 1.3vh, 16px);
  text-align: center;
}
.pano-imza-firma {
  font-family: var(--font-baslik);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(17px, 2.5vh, 23px);
  line-height: 1.1;
  color: var(--yazi);
}
.pano-imza .imza { margin: 0; font-size: clamp(13px, 1.8vh, 15px); }

/* "Şu an bakan" göstergesi: göz ve sayı, durum rozetinin yanında */
.bakan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--yazi-3);
}
.bakan svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--altin-yazi);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bakan .goz-bebek { fill: var(--altin-yazi); fill-opacity: 0.18; }
.bakan b {
  display: inline-block;
  min-width: 1.2ch;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--yazi-2);
}
.bakan b.degisti { animation: bakan-degisti 0.6s ease-out; }
@keyframes bakan-degisti {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bakan b.degisti { animation: none; }
}
/* Güncelleme saati rozette yazdığı için tablo üstündeki satıra gerek yok;
   "yatırım tavsiyesi değildir" uyarısı da açıklama paragrafında */
.pano .ft-ust,
.pano .ft-kaynak { display: none; }

/* Telefonda tek tablo, geniş ekranda üç yan yana kutu (alçak ekranlara da sığar) */
.fiyat-genis { display: none; }
@media (min-width: 900px) {
  .fiyat-dar { display: none; }
  .fiyat-genis { display: block; }
}

@media (max-width: 560px) {
  .pano-imza-firma { font-size: 15px; }
  .pano-imza .imza { font-size: 12px; gap: 8px; }
  .pano-imza .imza i { width: 16px; }
  .bakan { font-size: 13px; gap: 5px; }
  .bakan b { font-size: 14px; }
  .bakan svg { width: 18px; height: 18px; }
}
.durum {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--yazi-2);
  background: var(--cizgi-yumusak);
}
.durum::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.durum[data-tip="canli"] { color: var(--yukari); background: var(--yukari-zemin); }
.durum[data-tip="canli"]::before { animation: nabiz 2.2s ease-out infinite; }
.durum[data-tip="bayat"],
.durum[data-tip="eski"],
.durum[data-tip="ornek"] { color: var(--uyari); background: var(--uyari-zemin); }
.durum[data-tip="hata"] { color: var(--asagi); background: var(--asagi-zemin); }

@keyframes nabiz {
  0%   { box-shadow: 0 0 0 0 rgba(var(--yukari-rgb), 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--yukari-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--yukari-rgb), 0); }
}

.ornek-uyari,
.noscript-uyari {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px dashed rgba(var(--uyari-rgb), 0.5);
  border-radius: var(--kenar);
  font-size: 14px;
  color: var(--uyari);
  background: var(--uyari-zemin);
}

.aciklama {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--yazi-3);
}
.aciklama strong { color: var(--yazi-2); font-weight: 600; }

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

.iletisim {
  padding-block: clamp(36px, 5vw, 56px);
  background: var(--zemin-derin);
  border-top: 1px solid var(--cizgi-yumusak);
}
.iletisim-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
}

.acik-durum {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}
.acik-durum::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.acik-durum[data-acik="evet"]  { color: var(--yukari); }
.acik-durum[data-acik="hayir"] { color: var(--asagi); }

.bilgi-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 20px 32px;
  margin: 22px 0 26px;
}
.bilgi-liste dt {
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yazi-3);
}
.bilgi-liste dd {
  margin: 0;
  font-size: 15px;
  color: var(--yazi);
}
.bilgi-liste a {
  text-decoration: none;
  border-bottom: 1px solid var(--cizgi-guclu);
}
.bilgi-liste a:hover { color: var(--vurgu); border-color: var(--altin); }

.saatler {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.saatler li {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
}
.saatler li span:first-child::after { content: ":"; }
.saatler .kapali { color: var(--yazi-3); }

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

.alt {
  padding-block: 24px calc(24px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--cizgi-yumusak);
  background: var(--zemin-derin);
}
.alt-ic {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  font-size: 12.5px;
  color: var(--yazi-3);
}
.alt-not { max-width: 70ch; }

/* ---------- WhatsApp düğmesi ---------- */

.wa-yuzen {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding-inline: 16px 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--dugme-1), var(--dugme-2));
  color: var(--dugme-yazi);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease;
}
.wa-yuzen:hover { transform: translateY(-2px); }
.wa-yuzen svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.wa-yuzen svg .dolu { fill: currentColor; stroke: none; }
/* Telefonda yüzen düğme fiyatların üstünü kapatmasın: üst çubuktaki simge kullanılır */
.wa-ust { display: none; }
@media (max-width: 640px) {
  .wa-yuzen { display: none; }
  .wa-ust { display: inline-flex; }
  .ust-sag { gap: 8px; }
}

/* ---------- Hesaplama: "3 çeyrek + 20 gram bilezik kaç TL?" (js/hesap.js) ---------- */

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hesap {
  padding-block: clamp(36px, 5vw, 60px);
  background: var(--zemin);
  border-top: 1px solid var(--cizgi-yumusak);
}
.hesap-ic {
  display: grid;
  gap: 22px;
  align-items: start;
}
@media (min-width: 900px) {
  .hesap-ic { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 48px; }
  .hesap-bas { position: sticky; top: 96px; }
}
.hesap-bas h2 { margin: 0 0 10px; }
.hesap-bas p { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.6; color: var(--yazi-2); }

.hesap-kart {
  display: grid;
  gap: 14px;
  padding: clamp(16px, 3vw, 26px);
  border: 1px solid var(--cizgi);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--golge);
}

/* Satın alırken / Bozdururken */
.hesap-islem {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--panel-giris);
  border: 1px solid var(--cizgi-yumusak);
}
.hesap-islem button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--yazi-2);
  font: 600 14px/1 var(--font-govde);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.hesap-islem button[aria-checked="true"] {
  background: linear-gradient(180deg, var(--dugme-1), var(--dugme-2));
  color: var(--dugme-yazi);
  box-shadow: 0 8px 18px -12px var(--dugme-golge);
}

.hesap-satirlar { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hesap-satir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px minmax(104px, auto) 36px;
  align-items: center;
  gap: 10px;
}
.hesap-yeni { animation: hesap-gir 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes hesap-gir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.hesap-sec { position: relative; display: block; min-width: 0; }
.hesap-sec::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.6px solid var(--yazi-3);
  border-bottom: 1.6px solid var(--yazi-3);
  transform: rotate(45deg);
  pointer-events: none;
}
.hesap-sec select,
.hesap-giris {
  height: 46px;
  border: 1px solid var(--cizgi-guclu);
  border-radius: 12px;
  background: var(--panel-giris);
  color: var(--yazi);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hesap-sec select {
  width: 100%;
  padding: 0 34px 0 14px;
  -webkit-appearance: none;
  appearance: none;
  font: 600 15px/1 var(--font-govde);
  text-overflow: ellipsis;
  cursor: pointer;
}
.hesap-giris {
  display: flex;
  align-items: center;
  padding-right: 12px;
  cursor: text;
}
.hesap-giris input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 6px 0 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: 700 16px/1 var(--font-govde);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.hesap-giris input:focus { outline: 0; }
.hesap-giris:focus-within,
.hesap-sec select:focus { border-color: var(--altin); box-shadow: 0 0 0 3px var(--giris-isik); outline: 0; }
.hesap-birim { font-size: 13px; font-weight: 600; color: var(--yazi-3); }

.hesap-ara { display: grid; justify-items: end; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hesap-ara b { font-size: 16px; font-weight: 700; color: var(--yazi); }
.hesap-ara small { font-size: 11.5px; color: var(--yazi-3); }

.hesap-sil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--yazi-3);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hesap-sil svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hesap-sil:hover:not(:disabled) { background: var(--asagi-zemin); color: var(--asagi); }
.hesap-sil:disabled { opacity: 0.3; cursor: default; }

.hesap-ekle {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px 0 12px;
  border: 1px dashed var(--cizgi-guclu);
  border-radius: 999px;
  background: transparent;
  color: var(--altin-yazi);
  font: 700 14px/1 var(--font-govde);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.hesap-ekle[hidden] { display: none; }
.hesap-ekle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hesap-ekle:hover { border-color: var(--altin); background: var(--uzerine); }

.hesap-toplam {
  display: grid;
  gap: 4px;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--cizgi);
}
.hesap-etiket { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yazi-3); }
.hesap-tutar {
  font-family: var(--font-govde);
  font-size: clamp(32px, 6vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--vurgu);
}
.hesap-not { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--yazi-3); }
.hesap-wa { justify-self: stretch; gap: 10px; }
.hesap-wa[hidden] { display: none; }
.hesap-wa svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

/* Telefonda satır iki kat: üstte ürün ve sil, altta miktar ve tutar */
@media (max-width: 560px) {
  .hesap-satir {
    grid-template-columns: minmax(0, 1fr) auto 36px;
    grid-template-areas: "urun urun sil" "miktar ara ara";
    gap: 8px 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cizgi-yumusak);
  }
  .hesap-satir:last-child { padding-bottom: 0; border-bottom: 0; }
  .hesap-sec { grid-area: urun; }
  .hesap-sil { grid-area: sil; }
  .hesap-giris { grid-area: miktar; max-width: 160px; }
  .hesap-ara { grid-area: ara; }
}

/* ---------- Hareket azaltma ---------- */

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

/* Alçak telefon ekranları (iPhone SE vb.): bant daha sıkı, fiyatlar yukarı gelsin */
@media (max-width: 899px) and (max-height: 700px) {
  .bant-ic { padding-block: 8px; gap: 4px 12px; }
  .logo-ad { font-size: 24px; }
  .saat { font-size: 34px; }
  .saat-kutu .durum { padding-block: 2px; font-size: 11px; }
  .bant .bakan { font-size: 12px; }
}

/* İmza: iki yanında incelen altın çizgiler */
.imza {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  /* Biraz daha modern (Manrope) ve biraz daha kalın */
  font-family: var(--font-govde);
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--altin-yazi);
}
/* İsimlerin iki yanında ve aralarında altın çizgi işlemesi (aynı yatay hizada) */
.imza i {
  flex: none;
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--altin), transparent);
}
.imza i:first-child { background: linear-gradient(90deg, transparent, var(--altin)); }
.imza i:last-child { background: linear-gradient(90deg, var(--altin), transparent); }

/* Yönetici girişi: sağ üstte küçük kişi simgesi */
.uye-dugme { position: relative; width: 36px; height: 36px; border-color: var(--cizgi); }
.uye-dugme svg { width: 17px; height: 17px; }
@media (max-width: 400px) {
  .uye-dugme { width: 32px; height: 32px; }
}

/* Giriş penceresi */
.uye-pencere {
  width: min(420px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--cizgi);
  border-radius: 20px;
  background: var(--panel);
  color: var(--yazi);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}
.uye-pencere::backdrop { background: rgba(4, 14, 11, 0.6); }
.uye-pencere[open] { display: grid; }
.up-kapat { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; background: var(--panel); }
.up-bas {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 30px 24px 16px;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--uzerine), transparent 70%);
  border-bottom: 1px solid var(--cizgi);
}
.up-logo {
  font-family: var(--font-baslik);
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  color: var(--altin-yazi);
}
.up-bas h2 { margin: 8px 0 0; font-family: var(--font-baslik); font-weight: 600; font-size: 24px; }
.up-alt { margin: 0; font-size: 14px; color: var(--yazi-3); }

.up-form { display: grid; gap: 12px; padding: 16px 20px 6px; }
.up-form[hidden] { display: none; }
.up-alan { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--yazi-2); }
.up-alan em { font-style: normal; font-weight: 500; color: var(--yazi-3); }
.up-alan input {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--cizgi-guclu);
  border-radius: 12px;
  background: var(--panel-giris);
  color: var(--yazi);
  font: 500 16px/1 var(--font-govde);
}
.up-alan input:focus { outline: 2px solid var(--altin); outline-offset: 1px; border-color: transparent; }
.up-alan input[aria-invalid="true"] { border-color: var(--asagi); }
.up-sifre { position: relative; display: block; }
.up-sifre input { padding-right: 76px; }
.up-goster {
  position: absolute;
  top: 6px;
  right: 6px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: var(--uzerine);
  color: var(--altin-yazi);
  font: 600 12.5px/1 var(--font-govde);
  cursor: pointer;
}
.up-hata {
  margin: 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--asagi-zemin);
  color: var(--asagi);
  font-size: 13.5px;
  font-weight: 600;
}
.up-gonder { width: 100%; margin-top: 2px; }
.up-gonder:disabled { opacity: 0.7; cursor: wait; transform: none; }
.up-not { margin: 6px 20px 20px; font-size: 12.5px; text-align: center; color: var(--yazi-3); }


/* Yönetim panelinden yazılan duyuru: çerçevesiz, imzayla aynı el yazısı
   havasında; iki yanında incelen altın çizgiler */
.duyuru {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto clamp(6px, 1.2vh, 14px);
  max-width: 860px;
  font-family: var(--font-baslik);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(16px, 2.3vh, 21px);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--yazi);
  text-align: center;
}
.duyuru::before,
.duyuru::after {
  content: "";
  flex: 0 1 64px;
  min-width: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--altin));
}
.duyuru::after { transform: scaleX(-1); }
@media (max-width: 560px) {
  .duyuru { gap: 8px; font-size: 14px; }
  .duyuru::before, .duyuru::after { flex-basis: 16px; min-width: 10px; }
}

/* Telefonda fiyatlar kaydırmadan sığsın: başlık tek satır, duyuru varsa
   karşılama satırının yerini alır */
@media (max-width: 560px) {
  .duyuru { margin-bottom: 6px; }
}
@media (max-width: 560px) and (max-height: 700px) {
  .pano.duyurulu .pano-imza { margin-bottom: 4px; gap: 0; }
  .pano.duyurulu .pano-imza-firma { font-size: 13.5px; }
  .pano.duyurulu .pano-imza .imza { font-size: 11px; }
  .duyuru { font-size: 14px; line-height: 1.25; }
  .pano.duyurulu .ft-tek .ft-tablo tbody th,
  .pano.duyurulu .ft-tek .ft-tablo td { padding-block: 3px; }
}

/* Logodaki "v" ince çizgisi yüzünden "u" gibi okunmasın: minik kalınlaştırma */
.logo-v { -webkit-text-stroke: 0.02em currentColor; }

/* ---------- Takı modelleri: fiyatların altında yavaşça kayan vitrin şeridi ---------- */
.takilar { padding-block: 22px 10px; background: var(--zemin); overflow: hidden; }
.takilar-bas {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.takilar-bas h2,
.tt-bas h2 {
  margin: 0;
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: clamp(22px, 3vw, 28px);
}
.takilar-bas h2 em,
.tt-bas h2 em { font-style: italic; font-weight: 500; color: var(--vurgu-buyuk); }
.taki-tumu-dugme {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: var(--altin-yazi);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.taki-tumu-dugme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.taki-tumu-dugme:hover svg { transform: translateX(3px); }

/* Kenarlarda yumuşakça kaybolan, sonsuz kayan şerit */
.taki-serit {
  overflow: hidden;
  padding-block: 4px 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.taki-ray {
  display: flex;
  width: max-content;
  animation: taki-kay var(--sure, 40s) linear infinite;
}
.taki-serit:hover .taki-ray,
.taki-serit.durdu .taki-ray,
.taki-ray:focus-within { animation-play-state: paused; }
@keyframes taki-kay { to { transform: translateX(-50%); } }
.taki-serit-kart {
  display: grid;
  flex: none;
  width: clamp(150px, 16vw, 200px);
  margin-right: 14px;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  background: var(--panel);
  color: var(--yazi);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 16px 30px -26px rgba(16, 32, 26, 0.5);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.taki-serit-kart:hover { transform: translateY(-3px); border-color: var(--cizgi-guclu); }
.taki-serit-kart img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--zemin-derin); }
.taki-serit-kart span { display: grid; gap: 1px; padding: 8px 10px 10px; }
.taki-serit-kart strong { font-size: 13.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.taki-serit-kart small { font-size: 12px; color: var(--yazi-3); }

/* Az hareket isteyenlerde şerit durur, parmakla kaydırılır */
@media (prefers-reduced-motion: reduce) {
  .taki-serit { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .taki-ray { animation: none; }
  .taki-serit-kart[aria-hidden="true"] { display: none; }
}

/* Bütün modeller penceresi */
.taki-tumu {
  width: min(1100px, calc(100% - 24px));
  height: min(900px, calc(100dvh - 24px));
  padding: 0;
  overflow: auto;
  border: 1px solid var(--cizgi);
  border-radius: 18px;
  background: var(--zemin);
  color: var(--yazi);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}
.taki-tumu::backdrop { background: rgba(4, 14, 11, 0.6); }
.taki-tumu[open] { display: grid; grid-template-rows: auto auto 1fr; align-content: start; }
.tt-bas {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--ust-zemin);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cizgi-yumusak);
}
.taki-tumu .taki-filtre { padding: 14px 18px 0; }
.taki-tumu .taki-izgara { padding: 14px 18px 22px; align-content: start; }
.taki-filtre { display: flex; flex-wrap: wrap; gap: 8px; }
.taki-cip {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  background: transparent;
  color: var(--yazi-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.taki-cip[aria-pressed="true"] { border-color: var(--altin); background: var(--uzerine); color: var(--yazi); font-weight: 800; }

.taki-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 220px), 1fr)); gap: 14px; }
.taki-kart {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  background: var(--panel);
  color: var(--yazi);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.taki-kart:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -24px rgba(16, 32, 26, 0.5); }
.taki-kart img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--zemin-derin); }
.taki-kart-bilgi { display: grid; gap: 2px; padding: 10px 12px 12px; }
.taki-kart-bilgi strong { font-size: 14.5px; line-height: 1.3; }
.taki-kart-bilgi small { font-size: 12.5px; color: var(--yazi-3); }
.taki-kart-bilgi em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--vurgu); }

.taki-buyuk {
  width: min(560px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--cizgi);
  border-radius: 18px;
  background: var(--panel);
  color: var(--yazi);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}
.taki-buyuk::backdrop { background: rgba(4, 14, 11, 0.6); }
.taki-buyuk img { display: block; width: 100%; max-height: 62dvh; object-fit: contain; background: var(--zemin-derin); }
.taki-kapat { position: absolute; top: 10px; right: 10px; z-index: 1; background: var(--panel); }
.tb-bilgi { display: grid; gap: 6px; padding: 16px 18px 18px; }
.tb-bilgi h3 { margin: 0; font-family: var(--font-baslik); font-weight: 600; font-size: 24px; }
.tb-bilgi p { margin: 0; }
.tb-detay { font-size: 14px; color: var(--yazi-3); }
.tb-aciklama { font-size: 14.5px; line-height: 1.5; color: var(--yazi-2); }
.tb-fiyat { font-size: 15px; font-weight: 700; color: var(--vurgu); }
/* Örnek modellerde fotoğrafın kaynağı (açık lisans gereği) ve "temsili" notu */
.tb-kaynak { font-size: 11.5px; line-height: 1.45; color: var(--yazi-3); }
.tb-kaynak a, .tt-kaynak a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tt-kaynak { margin: 18px 4px 4px; font-size: 12.5px; color: var(--yazi-3); text-align: center; }
.tb-dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.tb-dugmeler .dugme { min-height: 46px; padding-inline: 12px; white-space: nowrap; }

@media (max-width: 560px) {
  .takilar { padding-block: 16px 6px; }
  .taki-izgara { gap: 10px; }
  .taki-tumu { width: 100%; height: 100dvh; max-height: 100dvh; max-width: 100%; border-radius: 0; border: 0; }
  .tt-bas, .taki-tumu .taki-filtre, .taki-tumu .taki-izgara { padding-inline: 14px; }
}