/* ============================================================
   KAIT — "Galeri" teması (RAPOR-09)
   Müze dükkânı dili: serif başlık, krem zemin, tek ince altın vurgu,
   bol boşluk, sakin hareket. style.css + sayfalar.css'in ÜSTÜNE yüklenir;
   kaldırmak için <link> satırını silmek yeter (araclar/uret.py → sayfa()).
   ============================================================ */

/* ---------- 1. Değişkenler: eski paleti yeni anlamlara bağla ---------- */
:root {
  --krem: #F3EEE4;
  --krem-2: #EAE3D5;          /* kart ve görsel zemini */
  --murekkep: #1B1A17;        /* metin */
  --murekkep-2: #121110;
  --gece: #17161B;            /* koyu bantlar */
  --altin: #7A6438;           /* krem zeminde metin olarak okunur altın */
  --altin-a: #C9A86A;         /* koyu zeminde altın */
  --cizgi: rgba(27, 26, 23, .14);
  --cizgi-a: rgba(201, 168, 106, .28);

  /* style.css'in değişkenleri — bileşenler bunları okuyor */
  --kagit: var(--krem);
  --kart: #201F25;
  --beyaz: #FBF9F4;
  --soluk-k: #5C574D;
  --soluk-a: #B9B3A6;
  --mavi: var(--altin);
  --mavi-a: var(--altin-a);
  --turuncu: var(--altin);
  --yesil: #4F6B4A;

  --f-baslik: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --f-metin: "Instrument Sans", "Segoe UI", sans-serif;
  --f-mono: "Instrument Sans", "Segoe UI", sans-serif;   /* mono etiketler sans'a döner */
  --r: 4px;
  --gecis: 320ms cubic-bezier(.25, .1, .25, 1);
}

body { background: var(--krem); color: var(--murekkep); }
::selection { background: var(--altin-a); color: var(--murekkep); }
:focus-visible { outline-color: var(--altin); }

/* ---------- 2. Tipografi ---------- */
h1, h2, h3 { font-weight: 600; letter-spacing: -.005em; line-height: 1.08; }
h2 { font-size: clamp(2.1rem, 4vw, 3.3rem); }
h3 { font-family: var(--f-baslik); font-size: 1.45rem; font-weight: 600; }
em { font-style: italic; }

.mono { font-size: .7rem; letter-spacing: .16em; }
.eyebrow { color: var(--altin); font-size: .7rem; letter-spacing: .24em; gap: 14px; }
.eyebrow::before { width: 28px; height: 1px; background: currentColor; background-image: none; }
.lead { color: var(--soluk-k); }

/* ---------- 3. Zeminler: milimetrik kâğıt ve tanecik yok ---------- */
.sec--kagit { background: var(--krem); background-image: none; }
.sec--murekkep { background: var(--gece); background-image: none; }
.sec { padding-block: clamp(80px, 11vw, 140px); }
.sec--ince { padding-block: clamp(56px, 7vw, 96px); }

/* Kesim çizgisi + makas imzası Galeri'de yok (şablon da artık üretmiyor) */
.kesim { display: none; }

/* ---------- 4. Üst bar ve alt bilgi ---------- */
.header.dolu { background: rgba(243, 238, 228, .92); box-shadow: 0 1px 0 var(--cizgi); }
.nav a { font-size: .9rem; letter-spacing: .02em; }
.nav a::after { height: 1px; bottom: -5px; background: var(--altin); background-image: none; }
.burger { border: 1px solid var(--cizgi); border-radius: var(--r); }
.footer { background: var(--gece); border-top: 1px solid var(--cizgi-a); }
.footer .brand { background: var(--krem); border-radius: var(--r); }

/* ---------- 5. Düğmeler: dikdörtgen, sakin ---------- */
.btn { border-radius: 2px; font-weight: 500; letter-spacing: .04em; padding: 14px 28px; border-width: 1px; }
.btn--kucuk { padding: 10px 20px; }
.btn--dolu { background: var(--murekkep); color: var(--krem); }
.btn--dolu:hover { background: #3A372F; }
.sec--murekkep .btn--dolu { background: var(--altin-a); color: var(--gece); }
.sec--murekkep .btn--dolu:hover { background: #D8BC86; }
.btn--cerceve:hover { border-style: solid; background: rgba(27, 26, 23, .04); }
.sec--murekkep .btn--cerceve:hover { background: rgba(243, 238, 228, .06); }

/* ---------- 6. Hero ---------- */
.hero__h1 { font-size: clamp(3rem, 7vw, 5.6rem); font-weight: 500; line-height: 1; letter-spacing: -.01em; }
.hero__h1 em, .sayfa-bas__h1 em { color: var(--altin); font-weight: 500; font-style: italic; }
.hero__p { color: var(--soluk-k); font-size: 1.12rem; }
.hero__ticks li::before { background: var(--altin); background-image: none; height: 1px; }
.vitrin__render { border-radius: 2px; box-shadow: 0 40px 80px -48px rgba(27, 26, 23, .5); }

/* ---------- 7. Model kartı ---------- */
.mk { background: var(--gece); border-radius: 2px; color: var(--krem); }
.mk:nth-child(2) { background: var(--gece); }
.mk__kisa, .mk:nth-child(2) .mk__kisa { color: var(--altin-a); }
.mk__ad { font-weight: 500; font-size: clamp(2.4rem, 5vw, 3.6rem); }
.mk__slogan { font-family: var(--f-baslik); font-style: italic; font-size: 1.3rem; opacity: 1; color: #D9D2C3; }
.mk__ozellik, .mk__sayi { color: var(--soluk-a); }
.mk:hover { transform: none; box-shadow: inset 0 0 0 1px var(--altin-a); }

/* ---------- 8. Desen kartı: çerçevesiz, galeri etiketi ---------- */
.dk { background: transparent; border: 0; border-radius: 0; }
.dk:hover { transform: none; box-shadow: none; }
.dk__gorsel { background: var(--krem-2); border-radius: 2px; }
.dk:hover .dk__gorsel img { transform: scale(1.025); }
.dk__gorsel img { transition: transform 900ms cubic-bezier(.2, .7, .2, 1); }
.dk__rozet { background: var(--krem); color: var(--altin); border: 1px solid var(--altin); border-radius: 0; font-size: .6rem; letter-spacing: .14em; }
.dk__bilgi { border-top: 0; padding: 14px 2px 6px; gap: 3px; }
.dk__kod { color: var(--altin); font-size: .62rem; }
.dk__ad { font-family: var(--f-baslik); font-weight: 600; font-size: 1.45rem; text-transform: none; letter-spacing: 0; line-height: 1.1; }
.dk__tasarimci { font-family: var(--f-baslik); font-style: italic; font-size: 1.02rem; letter-spacing: 0; text-transform: none; color: var(--soluk-k); }
.dk__durum { color: var(--murekkep); font-size: .8rem; letter-spacing: .04em; border-bottom: 1px solid var(--cizgi); align-self: flex-start; padding-bottom: 2px; }
.dk:hover .dk__durum { border-color: var(--altin); }
.dizgi { gap: clamp(28px, 3vw, 44px) clamp(18px, 2vw, 28px); }

/* ---------- 9. Tasarımcı şeridi ve kartları ---------- */
.ts { border: 1px solid var(--cizgi-a); border-radius: 2px; }
.ts:hover { border-style: solid; border-color: var(--altin-a); }
.ts__harf, .tk__harf { background: transparent; border: 1px solid currentColor; font-family: var(--f-baslik); font-weight: 500; font-size: 1.5rem; }
.ts__harf { color: var(--altin-a); }
.ts__ad { font-family: var(--f-baslik); font-size: 1.3rem; font-weight: 600; }
.tk { background: transparent; border: 0; border-top: 1px solid var(--cizgi); border-radius: 0; padding: 26px 2px; }
.tk:hover { transform: none; box-shadow: none; }
.tk__harf { color: var(--altin); }
.tk__ad { font-weight: 600; font-size: 1.8rem; }
.tk__sayi { color: var(--altin); }

/* ---------- 10. Sezon kartı ---------- */
.sk { background: transparent; border: 0; border-top: 1px solid var(--cizgi); border-radius: 0; padding: 32px 0; }
.sk:hover { box-shadow: none; }
.sk__mozaik img { border-radius: 2px; }
.sk__no { color: var(--altin); }
.sk__ad { font-weight: 500; font-size: clamp(2.4rem, 5vw, 3.8rem); }
.sk__ozet { font-family: var(--f-baslik); font-style: italic; font-size: 1.25rem; line-height: 1.4; }
.sk__sayi { color: var(--murekkep); }
.sk--surekli { border-top-style: solid; }
.bos-durum { border: 1px solid var(--cizgi); border-radius: 2px; font-family: var(--f-baslik); font-style: italic; font-size: 1.15rem; }

/* ---------- 11. Ürün sayfası ---------- */
.galeri__sahne, .galeri__kucuk { background: var(--krem-2); border-radius: 2px; }
.galeri__yazi { background: rgba(243, 238, 228, .9); border-radius: 0; font-size: .62rem; }
.galeri__kucuk[aria-current="true"] { outline-color: var(--murekkep); outline-width: 1px; }
.galeri__kucuk:hover { outline-color: var(--cizgi); }
.galeri__not { font-family: var(--f-baslik); font-style: italic; font-size: .98rem; }
.urun-bilgi__kod { color: var(--altin); }
.urun-bilgi__ad { font-weight: 500; font-size: clamp(2.8rem, 5vw, 4.2rem); line-height: 1; }
.urun-bilgi__tasarimci { font-family: var(--f-baslik); font-style: italic; font-size: 1.25rem; letter-spacing: 0; text-transform: none; }
.urun-bilgi__tasarimci a { color: var(--murekkep); text-decoration-color: var(--altin); text-underline-offset: 4px; }
.urun-bilgi__aciklama { font-size: 1.05rem; }
.urun-bilgi__model a { color: var(--murekkep); }
.isterim__dugme:disabled { background: var(--yesil); color: var(--krem); }
.isterim__mesaj, .hf__mesaj { color: var(--yesil); }
.urun-bilgi__haber { border-top: 1px solid var(--cizgi); }
.ms span { border-radius: 2px; border-width: 1px; background: var(--beyaz); }
.ms input:checked + span { border-color: var(--murekkep); box-shadow: inset 0 0 0 1px var(--murekkep); }

/* ---------- 12. Formlar ---------- */
.hf input[type="email"] { border-radius: 2px; border-width: 1px; background: var(--beyaz); }
.hf--koyu input[type="email"] { background: #0E0D10; border-color: var(--cizgi-a); }
.hf__onay input, .hf--koyu .hf__onay input { accent-color: var(--altin); }
.hf__mesaj--hata { color: #9A3B2A; }
.hf--koyu .hf__mesaj--hata { color: #E8A08E; }

/* ---------- 13. Sayfa başları, metin sayfaları ---------- */
.sayfa-bas__h1 { font-weight: 500; font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1; }
.sayfa-bas__h1 em { color: var(--altin); }
.sayfa-bas__gorsel img { border-radius: 2px; box-shadow: 0 40px 80px -48px rgba(27, 26, 23, .45); }
.kirinti a { color: var(--altin); }
.metin h2 { font-size: 1.7rem; font-weight: 600; }
.metin b { color: var(--murekkep); }
.metin a { color: var(--altin); }
.spec li::before { background: var(--altin); }

/* ---------- 14. Hareket: sakin ---------- */
.reveal { transform: translateY(14px); transition: opacity 900ms ease, transform 900ms cubic-bezier(.2, .7, .2, 1); }

/* ---------- 15. Mobil menü: krem zemin, ince çizgi; kapalıyken kenarı ekranın tepesinde görünmesin ---------- */
@media (max-width: 860px) {
  .nav { background: var(--krem); backdrop-filter: none; border-bottom: 1px solid var(--cizgi); transform: translateY(-160%); }
  .nav.acik { transform: none; }
  .nav a { font-family: var(--f-baslik); font-size: 1.5rem; }
}