/* ============================================================
   January Made tasarım dili — Süleyman Sarı
   Tüm değerler :root üzerindeki --jm-* değişkenlerinden gelir.
   Yönetici girişi yapınca açılan "Tasarım Stüdyosu" bu değişkenleri
   canlı değiştirir ve Supabase'e (site_content → theme.jm) kaydeder.
   Kapatmak için: <html data-jm="off">
   ============================================================ */

:root{
  /* 1. Renk paleti */
  --jm-bg:#121214;            /* ana arka plan (antrasit) */
  --jm-text:#E9E4DA;          /* ana metin (sıcak fildişi) */
  --jm-card1:#1A1A1D;         /* kart / bölüm zemini 1 */
  --jm-card2:#242428;         /* kart / bölüm zemini 2 */
  --jm-terracotta:#C8A97E;    /* vurgu: yumuşak pirinç / şampanya altını */
  --jm-olive:#9AA07A;         /* zeytin yeşili (koyu zeminde açık ton) */
  --jm-champagne:#E3D5B8;     /* soft şampanya */
  --jm-border:rgba(255,255,255,.12);/* ince ayrım çizgisi */
  --jm-btn-hover-bg:var(--jm-terracotta);
  --jm-btn-hover-border:var(--jm-terracotta);

  /* 2. Tipografi */
  --jm-heading-font:"Cormorant Garamond",Georgia,serif;
  --jm-body-font:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --jm-h-weight:400;
  --jm-h-ls:-0.02em;
  --jm-h-lh:1.2;
  --jm-b-size:15px;
  --jm-b-weight:300;
  --jm-b-ls:0.03em;
  --jm-b-lh:1.7;
  --jm-l-size:12px;           /* küçük vurgu / alt başlık */
  --jm-l-ls:0.15em;

  /* 3. Geçiş & animasyon */
  --jm-ease:0.4s;
  --jm-anim-dist:20px;
  --jm-anim-dur:0.8s;

  /* 4. Düzen */
  --jm-sec-pad:80px;
  --jm-sec-eff:var(--jm-sec-pad);
}
@media (max-width:768px){ :root{ --jm-sec-eff:calc(var(--jm-sec-pad) * .6); } }

/* ---------- Palet: Tailwind "stone" ve "amber" değişkenlerini yeniden eşle ----------
   Site tüm renklerini bu değişkenlerden aldığı için tek noktadan her şey değişir.      */
html[data-jm="on"]{
  --color-stone-50:var(--jm-bg) !important;
  --color-stone-100:color-mix(in srgb,var(--jm-bg) 55%,var(--jm-card1)) !important;
  --color-stone-200:var(--jm-card1) !important;
  --color-stone-300:var(--jm-card2) !important;
  --color-stone-400:color-mix(in srgb,var(--jm-text) 38%,var(--jm-card2)) !important;
  --color-stone-500:color-mix(in srgb,var(--jm-text) 58%,var(--jm-bg)) !important;
  --color-stone-600:color-mix(in srgb,var(--jm-text) 72%,var(--jm-bg)) !important;
  --color-stone-700:color-mix(in srgb,var(--jm-text) 86%,var(--jm-bg)) !important;
  --color-stone-800:color-mix(in srgb,var(--jm-text) 94%,var(--jm-bg)) !important;
  --color-stone-900:var(--jm-text) !important;
  --color-stone-950:color-mix(in srgb,var(--jm-text) 82%,#000) !important;
  --color-amber-200:var(--jm-champagne) !important;
  --color-amber-300:color-mix(in srgb,var(--jm-terracotta) 55%,var(--jm-champagne)) !important;
  --color-amber-400:var(--jm-terracotta) !important;
  --color-amber-800:var(--jm-olive) !important;
  --site-bg-light:var(--jm-bg) !important;
  --font-serif:var(--jm-heading-font) !important;
  --font-sans:var(--jm-body-font) !important;
}
html[data-jm="on"]:not(.dark){ color-scheme:light; }
html[data-jm="on"][data-jm-tone="dark"]:not(.dark){ color-scheme:dark; }
html[data-jm="on"]:not(.dark) body{ background-color:var(--jm-bg); color:var(--jm-text); }
html[data-jm="on"]::selection, html[data-jm="on"] ::selection{ background:var(--jm-champagne); color:var(--jm-text); }

/* ---------- Tipografi ---------- */
html[data-jm="on"]:not([data-jm-page="admin"]) body{
  font-family:var(--jm-body-font);
  font-size:var(--jm-b-size);
  font-weight:var(--jm-b-weight);
  letter-spacing:var(--jm-b-ls);
  line-height:var(--jm-b-lh);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html[data-jm="on"]:not([data-jm-page="admin"]) main p, html[data-jm="on"]:not([data-jm-page="admin"]) main li, html[data-jm="on"]:not([data-jm-page="admin"]) footer p, html[data-jm="on"]:not([data-jm-page="admin"]) footer li{
  font-weight:var(--jm-b-weight);
  letter-spacing:var(--jm-b-ls);
  line-height:var(--jm-b-lh);
}
html[data-jm="on"]:not([data-jm-page="admin"]) main p:not([class*="text-xs"]):not([class*="text-["]):not([class*="text-lg"]):not([class*="text-xl"]):not([class*="text-2xl"]),
html[data-jm="on"]:not([data-jm-page="admin"]) main li:not([class*="text-xs"]):not([class*="text-["]){
  font-size:var(--jm-b-size);
}
html[data-jm="on"]:not([data-jm-page="admin"]) h1:not(.sari-name), html[data-jm="on"]:not([data-jm-page="admin"]) h2:not(.sari-name), html[data-jm="on"]:not([data-jm-page="admin"]) h3:not(.sari-name), html[data-jm="on"]:not([data-jm-page="admin"]) h4:not(.sari-name){
  font-family:var(--jm-heading-font);
  font-weight:var(--jm-h-weight);
  letter-spacing:var(--jm-h-ls);
  line-height:var(--jm-h-lh);
  text-transform:none;               /* başlıklar zarif, cümle düzeninde */
}
html[data-jm="on"]:not([data-jm-page="admin"]) h1:not(.sari-name){ font-size:clamp(2.6rem,5.4vw,4.6rem); }
html[data-jm="on"]:not([data-jm-page="admin"]) main h2:not(.sari-name){ font-size:clamp(2rem,3.6vw,3rem); }
html[data-jm="on"]:not([data-jm-page="admin"]) main h3:not(.sari-name){ font-size:clamp(1.4rem,2.2vw,1.85rem); }
html[data-jm="on"]:not([data-jm-page="admin"]) .font-serif:not(.sari-name):not(h1):not(h2):not(h3){ font-weight:var(--jm-h-weight); }

/* Küçük vurgular / alt başlıklar: BÜYÜK HARF, geniş harf aralığı */
html[data-jm="on"]:not([data-jm-page="admin"]) main .uppercase:not(h1):not(h2):not(h3):not(h4):not(.font-serif):not(.sari-name),
html[data-jm="on"]:not([data-jm-page="admin"]) footer .uppercase:not(.font-serif){
  font-family:var(--jm-body-font);
  font-size:var(--jm-l-size);
  letter-spacing:var(--jm-l-ls);
  font-weight:400;
  line-height:1.5;
}

/* Navigasyon: gövde metni stili */
html[data-jm="on"]:not([data-jm-page="admin"]) header nav{
  text-transform:none;
  font-size:calc(var(--jm-b-size) - 0px);
  letter-spacing:var(--jm-b-ls);
  font-weight:400;
}
html[data-jm="on"]:not([data-jm-page="admin"]) header nav button{ font-weight:400; letter-spacing:var(--jm-b-ls); }
html[data-jm="on"]:not([data-jm-page="admin"]) header nav button > span.absolute{ height:1px; background:var(--jm-terracotta); }
html[data-jm="on"]:not([data-jm-page="admin"]) header{ border-bottom:1px solid var(--jm-border); background-color:color-mix(in srgb,var(--jm-bg) 92%,transparent); }
html[data-jm="on"]:not([data-jm-page="admin"]) header .font-serif.uppercase{ letter-spacing:.06em; font-weight:500; }

/* ---------- Düzen: ferah boşluklar, ince çizgiler ---------- */
html[data-jm="on"]:not([data-jm-page="admin"]) main section:not([class*="min-h-"]):not(.jm-flush){
  padding-top:var(--jm-sec-eff);
  padding-bottom:var(--jm-sec-eff);
}
html[data-jm="on"]:not([data-jm-page="admin"]) main .flex-col.gap-24{ gap:0; }
html[data-jm="on"]:not([data-jm-page="admin"]) main .space-y-20 > * + *, html[data-jm="on"]:not([data-jm-page="admin"]) main .space-y-16 > * + *{ margin-top:0; }
html[data-jm="on"]:not([data-jm-page="admin"]) main .space-y-20, html[data-jm="on"]:not([data-jm-page="admin"]) main .space-y-16{ padding-top:0; padding-bottom:0; }
html[data-jm="on"]:not([data-jm-page="admin"]) main section:not([class*="min-h-"]) + section:not([class*="min-h-"]){ border-top:1px solid var(--jm-border); }

/* ince, göze batmayan çizgiler */
html[data-jm="on"]:not([data-jm-page="admin"]) [class*="border-stone-200"]:not(input):not(textarea):not(select):not(button),
html[data-jm="on"]:not([data-jm-page="admin"]) [class*="border-stone-300"]:not(input):not(textarea):not(select):not(button),
html[data-jm="on"]:not([data-jm-page="admin"]) hr{
  border-color:var(--jm-border);
}
html[data-jm="on"]:not([data-jm-page="admin"]).dark [class*="border-stone-800"]:not(input):not(textarea):not(select):not(button){ border-color:rgba(255,255,255,.1); }

/* Kart / bölüm zeminleri */
html[data-jm="on"]:not([data-jm-page="admin"]):not(.dark) main .bg-white{ background-color:var(--jm-card1); box-shadow:none; }
html[data-jm="on"]:not([data-jm-page="admin"]):not(.dark) main .bg-stone-100\/80, html[data-jm="on"]:not([data-jm-page="admin"]):not(.dark) main section[class*="bg-stone-100"]{ background-color:var(--jm-card2); }
html[data-jm="on"]:not([data-jm-page="admin"]) main .shadow-xs, html[data-jm="on"]:not([data-jm-page="admin"]) main .shadow-sm, html[data-jm="on"]:not([data-jm-page="admin"]) main .shadow-md{ box-shadow:none; }
html[data-jm="on"]:not([data-jm-page="admin"]) main section [class*="bg-white"][class*="border"]{ border-color:var(--jm-border); }

/* ---------- Footer (açık, sıcak) ---------- */
html[data-jm="on"][data-jm-footer="light"]:not(.dark) footer{
  --color-stone-50:var(--jm-text);   --color-stone-100:color-mix(in srgb,var(--jm-text) 94%,var(--jm-bg));
  --color-stone-200:color-mix(in srgb,var(--jm-text) 86%,var(--jm-bg)); --color-stone-300:color-mix(in srgb,var(--jm-text) 84%,var(--jm-bg));
  --color-stone-400:color-mix(in srgb,var(--jm-text) 76%,var(--jm-bg)); --color-stone-500:color-mix(in srgb,var(--jm-text) 66%,var(--jm-bg));
  --color-stone-600:color-mix(in srgb,var(--jm-text) 38%,var(--jm-card2)); --color-stone-700:var(--jm-card2);
  --color-stone-800:color-mix(in srgb,var(--jm-text) 14%,var(--jm-card2)); --color-stone-900:var(--jm-card1); --color-stone-950:var(--jm-bg);
  background-color:var(--jm-card1); border-top:1px solid var(--jm-border);
}
html[data-jm="on"][data-jm-footer="light"]:not(.dark) footer [class*="border-stone-800"]{ border-color:var(--jm-border); }
html[data-jm="on"][data-jm-footer="light"]:not(.dark) footer .bg-stone-950\/70{ background-color:transparent; }

/* ---------- Geçişler & mikro-etkileşimler ---------- */
html[data-jm="on"]:not([data-jm-page="admin"]) :is(a,button,[role="button"],input,textarea,select,label,summary,[class*="hover:"]){
  transition:all var(--jm-ease) ease-in-out;
}
html[data-jm="on"]:not([data-jm-page="admin"]) :is(a,button,[role="button"],summary){ cursor:pointer; }

/* Buton hover: dolu (koyu) butonlar yumuşakça koyulaşır, çerçeveli butonların kenarlığı değişir */
html[data-jm="on"]:not([data-jm-page="admin"]) main :is(button,a).bg-stone-900:hover, html[data-jm="on"]:not([data-jm-page="admin"]) main :is(button,a):is([class^="bg-stone-900"],[class*=" bg-stone-900"]):hover,
html[data-jm="on"]:not([data-jm-page="admin"]) main :is(button,a).bg-stone-950:hover{
  background-color:var(--jm-btn-hover-bg) !important;
  border-color:var(--jm-btn-hover-bg) !important;
}
html[data-jm="on"]:not([data-jm-page="admin"]) main :is(button,a)[class*="border-stone-"]:not(:is([class^="bg-stone-900"],[class*=" bg-stone-900"])):not(:is([class^="bg-stone-950"],[class*=" bg-stone-950"])):hover{
  border-color:var(--jm-btn-hover-border) !important;
}

/* ---------- Aşağıdan yukarı yumuşak belirme (fade-in-up) ---------- */
@media (prefers-reduced-motion:no-preference){
  html[data-jm-anim="on"] [data-jm-r="pre"]{
    opacity:0;
    transform:translateY(var(--jm-anim-dist));
  }
  html[data-jm-anim="on"] [data-jm-r="in"]{
    opacity:1;
    transform:translateY(0);
    transition:opacity var(--jm-anim-dur) ease-in-out var(--jm-delay,0ms),
               transform var(--jm-anim-dur) ease-in-out var(--jm-delay,0ms) !important;
  }
  html[data-jm-anim="on"] [data-jm-r="done"]{ opacity:1; transform:none; }
}

/* Slayt / hero alanı gecikmesiz görünür */
html[data-jm="on"]:not([data-jm-page="admin"]) section[class*="min-h-"] [data-jm-r]{ opacity:1; transform:none; }

html[data-jm="on"][data-jm-footer="light"]:not(.dark) footer :is(.text-white,[class*="hover:text-white"]:hover){ color:var(--jm-text); }
html[data-jm="on"][data-jm-footer="light"]:not(.dark) footer h4, html[data-jm="on"][data-jm-footer="light"]:not(.dark) footer h3{ color:var(--jm-text); }

/* ---------- Kök kapsayıcının sabit koyu yazı rengi, seçilen ana metin rengine bağlanır ---------- */
html[data-jm="on"]:not(.dark):not([data-jm-page="admin"]) #root > div{ color:var(--jm-text); }
html[data-jm="on"]:not(.dark):not([data-jm-page="admin"]) :is(main,footer) :is(input,textarea,select){ color:var(--jm-text); }
html[data-jm="on"][data-jm-tone="dark"]:not(.dark) :is(main,footer) :is(input,textarea,select)::placeholder{ color:color-mix(in srgb,var(--jm-text) 55%,transparent); }
/* Ziyaretçi önizleme modunda tüm yönetici arayüzü gizli */
html[data-jm-visitor] [data-sc-ui]{ display:none !important; }

/* ---------- Koyu zemin: soluk gri tonlar ve dolu butonlar okunur kalsın ---------- */
html[data-jm="on"][data-jm-tone="dark"]:not(.dark){
  --color-stone-400:color-mix(in srgb,var(--jm-text) 62%,var(--jm-bg)) !important;
  --color-stone-500:color-mix(in srgb,var(--jm-text) 74%,var(--jm-bg)) !important;
  --color-stone-600:color-mix(in srgb,var(--jm-text) 82%,var(--jm-bg)) !important;
  --color-stone-700:color-mix(in srgb,var(--jm-text) 90%,var(--jm-bg)) !important;
}
html[data-jm="on"][data-jm-tone="dark"]:not(.dark):not([data-jm-page="admin"]) main :is(button,a):is([class~="bg-stone-900"],[class~="bg-stone-950"]){ color:var(--jm-bg); }

/* Koyu temada hero (görsel üstü) açık renkli kalsın: açık stone tonları orijinal değerlerine döner */
html[data-jm="on"][data-jm-tone="dark"]:not(.dark) main section[class*="min-h-"]{
  --color-stone-50:#fafaf9 !important; --color-stone-100:#f5f5f4 !important; --color-stone-200:#e7e5e4 !important;
  --color-stone-300:#d6d3d1 !important; --color-stone-400:#a8a29e !important; --color-stone-500:#78716c !important;
  --color-stone-600:#57534e !important; --color-stone-700:#44403c !important; --color-stone-800:#292524 !important; --color-stone-900:#1c1917 !important; --color-stone-950:#0c0a09 !important;
}

/* ---------- Mobil düzeltme: Öne çıkan eserler kartlarında görsel genişliği 110px'e çöküyordu ---------- */
@media (max-width:1023px){
  html[data-jm="on"] main figure[role="button"] > div{ max-width:86vw; }
  html[data-jm="on"] main figure[role="button"] img{ max-width:86vw !important; }
  html[data-jm="on"] main figure[role="button"] figcaption{ width:0; min-width:100%; }
}

/* ---------- Koyu galeri: seçili metin okunur kalsın ---------- */
html[data-jm="on"][data-jm-tone="dark"] ::selection{ background:var(--jm-champagne); color:var(--jm-bg); }

/* ---------- Koyu galeri: "koyu yüzeyler" (görsel zemini, lightbox, görsel üstü çipler) ----------
   Site bu yüzeyleri bg-stone-950 / bg-stone-900/xx ile çiziyor; palet ters çevrildiği için açık gri oluyordu.
   Bu yüzeylerde (ve içlerinde) stone ölçeği orijinal koyu değerlerine döner. */
html[data-jm="on"][data-jm-tone="dark"]:not(.dark):not([data-jm-page="admin"]) :is([class~="bg-stone-950"]:not(button):not(a),[class^="bg-stone-950/"],[class*=" bg-stone-950/"],[class^="bg-stone-900/"],[class*=" bg-stone-900/"]){
  --color-stone-50:#fafaf9; --color-stone-100:#f5f5f4; --color-stone-200:#e7e5e4; --color-stone-300:#d6d3d1; --color-stone-400:#a8a29e;
  --color-stone-500:#78716c; --color-stone-600:#57534e; --color-stone-700:#44403c; --color-stone-800:#292524; --color-stone-900:#1c1917; --color-stone-950:#0c0a09;
}
html[data-jm="on"][data-jm-tone="dark"]:not(.dark):not([data-jm-page="admin"]) main :is(button,a):is([class^="bg-stone-900/"],[class*=" bg-stone-900/"],[class^="bg-stone-950/"],[class*=" bg-stone-950/"]):hover{
  background-color:rgba(12,10,9,.96) !important; border-color:var(--jm-terracotta) !important; color:#fafaf9;
}

/* ============================================================
   Mobil kararlılık (kaymalar)
   ============================================================ */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* Yatay taşma/sürüklenme olmasın (clip: sticky'yi bozmaz) */
html[data-jm="on"], html[data-jm="on"] body{ overflow-x:clip; }

/* 1) vh → svh/dvh: mobilde adres çubuğu açılıp kapanınca sayfa zıplamasın */
@supports (height:100svh){
  html[data-jm="on"] main section[class*="min-h-[88vh]"]{ min-height:88svh; }
}
@supports (height:100dvh){
  html[data-jm="on"] [class*="max-h-[75vh]"]{ max-height:75dvh; }
  html[data-jm="on"] [class*="max-h-[85vh]"]{ max-height:85dvh; }
  html[data-jm="on"] [class*="max-h-[88vh]"]{ max-height:88dvh; }
  html[data-jm="on"] [class*="max-h-[90vh]"]{ max-height:90dvh; }
  html[data-jm="on"] [class*="max-h-[92vh]"]{ max-height:92dvh; }
  html[data-jm="on"] [role="dialog"].h-screen{ height:100dvh; width:100%; }
}

/* 2) Yatay eser şeridi: uçta kaydırınca sayfa/tarayıcı geri-ileri kaymasın */
html[data-jm="on"] main [class*="snap-x"]{ overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }

@media (max-width:1023px){
  /* 3) Hero paralaksı mobilde kapalı: görsel ve metin kaydırma sırasında kendi başına kaymasın */
  html[data-jm="on"] main section[class*="min-h-[88vh]"] > div.z-0 img{ transform:none !important; scale:none !important; translate:none !important; }
  html[data-jm="on"] main section[class*="min-h-[88vh]"] > div.z-10{ transform:none !important; translate:none !important; opacity:1 !important; }
}
@media (max-width:768px){
  /* 4) Belirme animasyonu mobilde daha kısa mesafe */
  html[data-jm-anim="on"] [data-jm-r="pre"]{ transform:translateY(10px); }
}