/* ============================================================
   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:#FAF9F6;            /* ana arka plan (sıcak krem / fildişi) */
  --jm-text:#1C1C1C;          /* ana metin (yumuşak antrasit) */
  --jm-card1:#EFECE6;         /* kart / bölüm zemini 1 */
  --jm-card2:#E5E0D8;         /* kart / bölüm zemini 2 */
  --jm-terracotta:#C98B6B;    /* pastel kiremit / taba */
  --jm-olive:#7B8157;         /* zeytin yeşili */
  --jm-champagne:#E9DCC3;     /* soft şampanya */
  --jm-border:rgba(0,0,0,.08);/* ince ayrım çizgisi */
  --jm-btn-hover-bg:color-mix(in srgb,var(--jm-terracotta) 62%,#000);
  --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"]: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) 78%,var(--jm-bg));
  --color-stone-400:color-mix(in srgb,var(--jm-text) 64%,var(--jm-bg)); --color-stone-500:color-mix(in srgb,var(--jm-text) 52%,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)[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([class*="bg-stone-900"]):not([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)[class*="bg-stone-9"]{ color:var(--jm-bg); }