/* assets/css/custom.css
   Small supplements to the Tailwind CDN theme — timeline connector
   lines, a subtle gold-tinted scrollbar, and the gece/gündüz (dark/
   light) mode variable system. Everything else is utility classes
   directly in markup. */

/* ---------------------------------------------------------------
   GECE/GÜNDÜZ MOD (dark/light mode)
   ---------------------------------------------------------------
   `:root` below holds the DARK values — identical to the site's
   original hardcoded hex colors, so with no `light` class on <html>
   the site renders exactly as before. `html.light` overrides each
   variable with a warm, cream/ivory light-mode counterpart. Since
   includes/head.php points every `bg-anthracite-*`, `text-gold-*`,
   `text-silver-*` Tailwind class at these variables (via
   rgb(var(--c-...) / <alpha-value>)), toggling the single `light`
   class on <html> re-colors the entire site instantly — no per-page
   markup changes needed.

   Values are "R G B" (space-separated, no commas) so Tailwind's
   `/ <alpha-value>` opacity modifiers (e.g. bg-anthracite-950/90)
   keep working in both modes. */
:root {
  --c-anthracite-950: 10 10 10;
  --c-anthracite-900: 20 20 20;
  --c-anthracite-800: 30 30 30;
  --c-anthracite-700: 42 42 42;
  --c-anthracite-600: 58 58 58;
  --c-anthracite-500: 74 74 74;

  --c-gold-300: 232 199 102;
  --c-gold-400: 223 186 73;
  --c-gold-500: 212 175 55;
  --c-gold-600: 179 146 44;

  --c-silver-100: 245 245 245;
  --c-silver-200: 230 230 230;
  --c-silver-300: 217 217 217;
  --c-silver-400: 191 191 191;
  --c-silver-500: 156 156 156;
  --c-silver-600: 122 122 122;
  --c-silver-700: 92 92 92;

  --c-selection-bg: 212 175 55;
  --c-selection-fg: 10 10 10;
  --c-scrollbar-track: 20 20 20;
  --c-scrollbar-thumb: 58 58 58;

  /* Kartlarda kullanılan shadow-ink/* sınıflarının koyu moddaki
     karşılığı — saf siyah, önceki shadow-black davranışıyla birebir
     aynı görünüm. */
  --c-shadow: 0 0 0;
}

html.light {
  /* ---------------------------------------------------------------
     "ATELİYE İVUARI" — açık mod, sıfırdan tasarlandı.
     ---------------------------------------------------------------
     Önceki sürüm sadece koyu tonları krem rengine "çeviriyordu":
     kart yüzeyi (900) ile sayfa zemini (950) neredeyse aynı tondaydı
     (fark ~8/255), bu da kartların zeminden hiç ayrışmamasına ve
     genel görünümün "solgun/yıkanmış" durmasına yol açıyordu.
     Bu yeni palet gerçek bir kat hiyerarşisi kurar:
       950 zemin  → yumuşak fildişi (sayfa arkaplanı)
       900 yüzey  → neredeyse saf beyaz (kartlar zeminden "yükselir")
       800/700/600 → giderek koyulaşan kenarlık/ayraç tonları
       500        → ikon kutusu / vurgu yüzeyi
     Altın da aynı ölçüde yeniden ayarlandı: eski ton kahverengiye
     kaçıyordu, yenisi daha doygun bir "eskitilmiş pirinç" tonu —
     yazı olarak kullanıldığında hâlâ AA kontrastını geçiyor. */
  --c-anthracite-950: 250 249 245;
  --c-anthracite-900: 255 255 255;
  --c-anthracite-800: 245 241 233;
  --c-anthracite-700: 231 224 208;
  --c-anthracite-600: 210 199 172;
  --c-anthracite-500: 184 170 140;

  /* Antik pirinç/altın — dark moddaki parlak #d4af37'nin krem zemin
     üzerinde metin olarak ezildiği yerde, doygunluğu koruyup
     kontrastı güvenli tutan daha zengin bir bronz-altın. */
  --c-gold-300: 164 123 22;
  --c-gold-400: 146 107 18;
  --c-gold-500: 129 93 16;
  --c-gold-600: 110 79 14;

  /* Silver: "koyu zemin üzerinde açık yazı" mantığı tersine döner —
     "açık zemin üzerinde koyu mürekkep". */
  --c-silver-100: 23 22 20;
  --c-silver-200: 41 39 35;
  --c-silver-300: 61 58 52;
  --c-silver-400: 86 82 73;
  --c-silver-500: 111 106 95;
  --c-silver-600: 140 134 119;
  --c-silver-700: 163 156 138;

  --c-selection-bg: 129 93 16;
  --c-selection-fg: 250 249 245;
  --c-scrollbar-track: 241 236 225;
  --c-scrollbar-thumb: 210 199 172;

  /* Gölgeler: dark modda saf siyah (0 0 0) gölgeler koyu zeminde
     görünmez zaten; açık modda ise aynı saf siyah gölgeler kartların
     altında ağır, "kirli" bir leke gibi durur. Bunun yerine sıcak,
     zeminle uyumlu bir "mürekkep" tonu kullanılır — modern açık mod
     arayüzlerinde standart olan yumuşak/renkli gölge tekniği. */
  --c-shadow: 120 100 66;
}

/* Two special cases where a class's ROLE doesn't track the surface
   variable it happens to share a number with:
   - text-anthracite-950 is ALWAYS the label on top of a solid gold
     fill (primary buttons, badge counters, avatar initials) — never
     a surface color. In dark mode gold is bright, so dark ink reads
     well on it. But in light mode gold-400/600 were deliberately
     deepened (see html.light block above) so gold works as
     legible TEXT elsewhere on a light page — and that same darker
     gold, used here as a BUTTON background, means dark-on-dark ink
     loses contrast and looks muddy/hard to read (exactly what was
     reported). So in light mode this ink flips to white instead of
     staying dark, matching the darker gold fill it sits on.
   - text-anthracite-600 is used for subtle/muted/disabled labels on
     top of a surface, not as a border — so it needs its own
     readable muted tone in light mode instead of following
     border-anthracite-600's flip to a pale border tan. */
html.light .text-anthracite-950 { color: rgb(255 255 255) !important; }
html.light .text-anthracite-600 { color: rgb(140 134 119) !important; }

/* Status/accent badge colors (red/emerald/blue/amber/purple/indigo/
   etc.) are Tailwind's stock palette, used as light-text-on-dark
   accents throughout admin/customer status pills and alerts. Their
   lighter shades (300/400) don't have enough contrast against a
   light background, so light mode nudges the ones actually used in
   this project a shade or two darker. Backgrounds/borders at low
   opacity (e.g. bg-red-500/10) already work fine unchanged in both
   modes, so only text colors need this safety net. */
html.light .text-red-300     { color: #b91c1c !important; }
html.light .text-red-400     { color: #b91c1c !important; }
html.light .text-emerald-300 { color: #047857 !important; }
html.light .text-emerald-400 { color: #047857 !important; }
html.light .text-blue-300    { color: #1d4ed8 !important; }
html.light .text-blue-400    { color: #1d4ed8 !important; }
html.light .text-amber-300   { color: #b45309 !important; }
html.light .text-amber-400   { color: #b45309 !important; }
html.light .text-purple-300  { color: #7e22ce !important; }
html.light .text-purple-400  { color: #7e22ce !important; }
html.light .text-indigo-300  { color: #4338ca !important; }
html.light .text-green-300   { color: #15803d !important; }
html.light .text-cyan-300    { color: #0e7490 !important; }
html.light .text-cyan-400    { color: #0e7490 !important; }
html.light .text-teal-400    { color: #0f766e !important; }
html.light .text-neutral-200 { color: #404040 !important; }
html.light .text-neutral-300 { color: #525252 !important; }

/* Smooth (not jarring) transition when the mode is toggled. Scoped
   to the properties that actually change, so it doesn't interfere
   with unrelated animations/transitions already used in markup. */
html, body, [class*="bg-"], [class*="text-"], [class*="border-"] {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
@media (prefers-reduced-motion: reduce) {
  html, body, [class*="bg-"], [class*="text-"], [class*="border-"] {
    transition: none;
  }
}

/* Toggle button: only one of the two icons is shown, chosen purely
   by CSS so there's no icon "flash" while JS loads. Dark mode shows
   a moon (click to go light); light mode shows a sun (click to go
   dark). See theme_toggle_button() in includes/functions.php. */
.theme-toggle-btn .theme-icon-light { display: none; }
html.light .theme-toggle-btn .theme-icon-dark { display: none; }
html.light .theme-toggle-btn .theme-icon-light { display: inline-flex; }

html, body {
  overflow-x: hidden;
  max-width: 100%;
  overscroll-behavior-x: none;
}

/* ---------------------------------------------------------------
   .prose-page — admin panelinden girilen serbest HTML içerik
   (Hakkımızda, SSS cevapları, özel sayfalar) için tipografi.
   ---------------------------------------------------------------
   ÖNEMLİ: Bu kurallar daha önce public/page.php içine iki kez
   (normal sayfa + SSS şablonu) SABİT hex renklerle (#e5e5e5,
   #f2f2f2, #bfbfbf...) gömülüydü. O renkler tema değişkenlerine
   değil, doğrudan koyu moda göre seçilmişti — html.light class'ı
   eklendiğinde HİÇ değişmiyorlardı. Sonuç: açık modda krem/beyaz
   zemin üzerinde açık gri/beyaza yakın başlık ve gövde metni —
   yani sayfanın en çok okunan kısmı (Hakkımızda, SSS) neredeyse
   okunaksız hale geliyordu. Kurallar artık --c-silver-*/--c-gold-*
   değişkenlerini kullanıyor, böylece tek bir yerden, her iki modda
   da doğru kontrastla render ediliyor. */
.prose-page :where(h1, h2, h3, h4) {
  font-family: 'Playfair Display', serif;
  color: rgb(var(--c-silver-100));
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: 0.6em;
}
.prose-page :first-child { margin-top: 0; }
.prose-page h2 { font-size: 1.4rem; }
.prose-page h3 { font-size: 1.15rem; }
.prose-page p { margin-bottom: 1.1em; }
.prose-page a {
  color: rgb(var(--c-gold-400));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose-page a:hover { color: rgb(var(--c-gold-300)); }
.prose-page ul, .prose-page ol { margin: 1.1em 0; padding-left: 1.4em; }
.prose-page ul { list-style: disc; }
.prose-page ol { list-style: decimal; }
.prose-page li { margin-bottom: 0.4em; }
.prose-page strong { color: rgb(var(--c-silver-100)); font-weight: 600; }
.prose-page blockquote {
  border-left: 3px solid rgb(var(--c-gold-500));
  padding-left: 1em;
  color: rgb(var(--c-silver-500));
  font-style: italic;
  margin: 1.5em 0;
}
.prose-page hr { border-color: rgb(var(--c-anthracite-700)); margin: 2em 0; }
.prose-page p:last-child { margin-bottom: 0; }

::selection {
  background-color: rgb(var(--c-selection-bg));
  color: rgb(var(--c-selection-fg));
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: rgb(var(--c-scrollbar-track));
}
::-webkit-scrollbar-thumb {
  background: rgb(var(--c-scrollbar-thumb));
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--c-gold-500));
}

/* Order tracking timeline connector */
.timeline-step {
  position: relative;
}
.timeline-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 1.25rem;
  left: 100%;
  width: 100%;
  height: 2px;
  background: rgb(var(--c-anthracite-700));
  z-index: 0;
}
.timeline-step.is-complete:not(:last-child)::after {
  background: linear-gradient(90deg, rgb(var(--c-gold-500)), rgb(var(--c-anthracite-700)));
}
.timeline-step .step-dot {
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .timeline-step:not(:last-child)::after {
    display: none;
  }
}

/* Premium gold shimmer price tag (Talep listeleri / Talep detay).
   Three pieces: a shimmering gradient sweep across the amount text,
   a diagonal light sweep across the tag itself, and a soft pulse
   ring behind the badge icon. All disabled under reduced motion. */
.gold-shimmer-amount {
  background-image: linear-gradient(100deg,
    #b3922c 0%, #d4af37 22%, #f5dd8a 42%,
    #fff6da 50%, #f5dd8a 58%, #d4af37 78%, #b3922c 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.45));
  animation: gold-shimmer-move 3.4s linear infinite;
}
@keyframes gold-shimmer-move {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Emerald counterpart of the shimmer above, used for approved/paid-out
   price amounts where the accent color must stay green. */
.emerald-shimmer-amount {
  background-image: linear-gradient(100deg,
    #0d9467 0%, #10b981 22%, #6ee7b7 42%,
    #d1fae5 50%, #6ee7b7 58%, #10b981 78%, #0d9467 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.45));
  animation: gold-shimmer-move 3.4s linear infinite;
}

.gold-price-tag .shine-sweep {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.gold-price-tag .shine-sweep::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 35%;
  height: 100%;
  background: linear-gradient(115deg,
    transparent 0%, rgba(255, 246, 214, 0.14) 45%,
    rgba(255, 246, 214, 0.32) 50%, rgba(255, 246, 214, 0.14) 55%, transparent 100%);
  transform: skewX(-20deg);
  animation: gold-price-sweep 3.4s ease-in-out infinite;
}
@keyframes gold-price-sweep {
  0%   { left: -60%; }
  40%  { left: 130%; }
  100% { left: 130%; }
}

.gold-badge-icon {
  position: relative;
}
.gold-badge-icon::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.45);
  animation: gold-badge-pulse 2.6s ease-out infinite;
}
@keyframes gold-badge-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(212, 175, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

.next-step-dot {
  position: relative;
  box-shadow: 0 0 0 0 rgba(129, 140, 248, 0.55);
  animation: indigo-dot-pulse 2.2s ease-out infinite;
}
@keyframes indigo-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(129, 140, 248, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(129, 140, 248, 0); }
  100% { box-shadow: 0 0 0 0 rgba(129, 140, 248, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .gold-shimmer-amount,
  .emerald-shimmer-amount,
  .gold-price-tag .shine-sweep::before,
  .gold-badge-icon::after,
  .next-step-dot {
    animation: none;
  }
}

/* The shimmer text effects above use hardcoded, deliberately very
   light/near-white highlight stops (e.g. #fff6da, #d1fae5) that read
   fine on the dark surfaces they were designed for but nearly
   disappear on a light/cream background. Light mode swaps in a
   deeper-toned gradient with the same shimmer motion so the price
   amount stays legible instead of washing out. */
html.light .gold-shimmer-amount {
  background-image: linear-gradient(100deg,
    #6b520f 0%, #8a6914 22%, #b3922c 42%,
    #d4af37 50%, #b3922c 58%, #8a6914 78%, #6b520f 100%);
  filter: drop-shadow(0 0 8px rgba(138, 105, 20, 0.35));
}
html.light .emerald-shimmer-amount {
  background-image: linear-gradient(100deg,
    #065f46 0%, #047857 22%, #059669 42%,
    #10b981 50%, #059669 58%, #047857 78%, #065f46 100%);
  filter: drop-shadow(0 0 8px rgba(4, 120, 87, 0.35));
}