/* -------------------------
   Global
--------------------------*/
html{ scroll-behavior:smooth; }

/* Logo animasyonu */
@keyframes delff-spin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
.logo-spin{ animation:delff-spin 5s linear infinite; transform-origin:50% 50%; display:block; will-change:transform; }
.logo-spin:hover{ animation-duration:2s; }
@media (prefers-reduced-motion:reduce){ .logo-spin{ animation:none } }

/* -------------------------
   Üst kayan yazı (ticker)
--------------------------*/
:root{
  --ticker-h: 48px;
  --ticker-speed: 20s;
}

.top-ticker{
  position:fixed; top:0; left:0; right:0; height:var(--ticker-h);
  z-index:60; background:var(--tickerBg); color:var(--tickerText);
  border-bottom:1px solid rgba(0,0,0,.06);
  display:flex; align-items:center; box-sizing:border-box; padding-block:4px;
}
.ticker-mask{ overflow:hidden; height:100%; width:100%; display:flex; align-items:center; }
.ticker-track{ display:flex; width:max-content; will-change:transform; animation:ticker-scroll var(--ticker-speed) linear infinite; }
.ticker-content{ display:flex; align-items:center; gap:3rem; padding-right:3rem; white-space:nowrap; }
.ticker-item{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:700; font-style:italic; font-size:1rem; letter-spacing:.06em; line-height:1;
}
@keyframes ticker-scroll{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
body.with-ticker{ padding-top:var(--ticker-h) }
header.sticky-offset{ top:var(--ticker-h) !important }

/* -------------------------
   DELFF Tema (açık)
--------------------------*/
:root{
  --bg:#ffffff;
  --text:#222222;
  --card:#ffffff;
  --muted:#6b7280;
  --border:#e5e7eb;
  --accent:#f6d0d8;
  --accentText:#c4001a;
  --tickerBg:#f6d0d8;
  --tickerText:#c4001a;

  /* link tonları */
  --link:#8f3737;
  --linkHover:#3b82f6;
}

/* -------------------------
   Modern Koyu Tema
--------------------------*/
.theme-dark{
  color-scheme:dark;

  --bg:#0b0c10;          /* ana arka plan */
  --card:#121318;        /* yüzey/kart */
  --text:#ECEFF4;        /* ana metin */
  --muted:#9AA3B2;       /* açıklama metni */
  --border:#232632;      /* ince ayraçlar */

  --accent:#ff4d64;      /* vurgu zemin (buton/highlight) */
  --accentText:#0b0c10;  /* vurgu üzeri yazı */

  --tickerBg:#121318;
  --tickerText:#ff8ea0;

  --link:#ff8ea0;
  --linkHover:#9bb7ff;
}
/* dark mode'da saydam koyu header */
.theme-dark .site-header{
  background-color: rgba(15,15,18,.75);
  backdrop-filter: blur(12px);
}


/* Uygulama */
body{ background:var(--bg); color:var(--text); }
a{ color:var(--link); } a:hover{ color:var(--linkHover); }

.btn-delff{ background:var(--accent); color:var(--accentText); font-weight:600; }
.btn-delff:hover{ filter:brightness(1.05); }

.highlight-delff{ background:var(--accent); color:var(--accentText); padding:.1em .4em; border-radius:.375rem; font-weight:600; }

.top-ticker{ background:var(--tickerBg); color:var(--tickerText); }

/* Tailwind utility override: temaya uyarlama */
.ring-inner{ background:var(--card); }
.bg-white{ background-color:var(--card) !important; }
.bg-neutral-50{ background-color: color-mix(in oklab, var(--bg) 85%, white 15%) !important; }
.text-neutral-600{ color:var(--muted) !important; }
.border-neutral-200{ border-color:var(--border) !important; }

/* -------------------------
   Gradient Ring (hero resim)
--------------------------*/
@property --angle { syntax:"<angle>"; initial-value:0deg; inherits:false; }
@keyframes spin-angle { to{ --angle:360deg } }

.gradient-ring{ position:relative; border-radius:1rem; padding:8px; box-sizing:border-box; overflow:visible; }
.gradient-ring::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: conic-gradient(from var(--angle), #c4001a, #f6d0d8, #c4001a);
  animation: spin-angle 6s linear infinite;
  z-index:0; pointer-events:none;
}
.theme-dark .gradient-ring::before{
  background: conic-gradient(from var(--angle), #ff4d64, #ff8ea0, #ff4d64);
}
.ring-inner{ position:relative; z-index:1; width:100%; height:100%; border-radius:inherit; overflow:hidden; }

/* -------------------------
   Shrink efekt
--------------------------*/
.top-ticker{ transition:height .35s ease, padding .35s ease; }
.ticker-item{ transition:font-size .35s ease, letter-spacing .35s ease; }
.site-logo{ transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.site-header .nav-row{ padding-block:1rem; transition: padding .35s cubic-bezier(.22,.61,.36,1); }

body.ticker-shrink{ --ticker-h:34px; }
body.ticker-shrink .top-ticker{ padding-block:2px; }
body.ticker-shrink .ticker-item{ font-size:.9rem; letter-spacing:.04em; }

body.header-shrink .site-logo{ transform:scale(.88); }
body.header-shrink .site-header .nav-row{ padding-block:.6rem; }

/* -------------------------
   Scrollbar gizle (slider)
--------------------------*/
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

/* ============ Settings: panel + buton ============ */
.settings-btn{
  position:fixed; right:1rem; bottom:1rem; z-index:10010;
  width:44px; height:44px; border-radius:9999px;
  display:grid; place-items:center;
  background:var(--card); color:var(--text);
  border:1px solid var(--border);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  opacity: 0.55;
  cursor:pointer; transition:transform .2s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.settings-btn:hover{ transform:translateY(-2px);
  opacity: 1;                 /* tam net */
  transform: scale(1.1);      /* biraz büyüsün */ }

.settings-panel{
  position:fixed; right:1rem; bottom:4.5rem; z-index:10000;
  width:260px; padding:12px;
  background:var(--card); color:var(--text);
  border:1px solid var(--border); border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  display:none;
}
.settings-panel.open{ display:block; }
.settings-panel .panel-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:.6rem .75rem; border:1px solid var(--border); border-radius:10px;
}

/* SR-only (erişilebilir) */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ============ Fotoğraftaki gibi anahtar ============ */
.switch{
  --w: 62px; --h: 30px; --p: 4px;
  position:relative; display:inline-block; width:var(--w); height:var(--h);
  border-radius:var(--h);
  background:linear-gradient(#e9eaec,#d7d9de);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.25);
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.switch .knob{
  position:absolute; inset:var(--p) auto var(--p) var(--p);
  width:calc(var(--h) - var(--p)*2); height:calc(var(--h) - var(--p)*2);
  border-radius:50%; background:#fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.22), inset 0 0 0 1px rgba(0,0,0,.08);
  transition: transform .32s cubic-bezier(.2,.8,.2,1), background-color .3s ease;
}
/* checked görünümü */
#darkToggle:checked + .switch{
  background:linear-gradient(180deg, #ff8ea0, #ff4d64);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.35);
}
#darkToggle:checked + .switch .knob{
  transform: translateX(calc(var(--w) - var(--h)));
  background:#0b0c10; /* koyu temadaki düğme rengi */
}

/* ============ Soft tema geçişi (yalnızca geçişte aktif) ============ */
.theme-animating, .theme-animating *{
  transition:
    background-color .38s ease,
    color .38s ease,
    border-color .38s ease,
    box-shadow .38s ease,
    fill .38s ease,
    stroke .38s ease !important;
}

/* Koyu temada nötr metinlerin görünürlüğü */
.text-neutral-700,
.text-neutral-800,
.text-neutral-900 { color: var(--text) !important; }

/* İsteğe bağlı: 500 de açıklama tonuna yaklaştırılsın */
.text-neutral-500,
.text-slate-500 { color: var(--muted) !important; }


/* Header – açık tema varsayılanı */
:root{
  --headerBg: rgba(255,255,255,.82); /* index ile aynı saydam beyaz */
}

/* Tüm sayfalarda ortak header stili */
.site-header{
  background-color: var(--headerBg);
  backdrop-filter: blur(10px);
}

/* Koyu tema için header rengi (zaten varsa aynen kalsın) */
.theme-dark .site-header{
  background-color: rgba(15,15,18,.75);
  backdrop-filter: blur(12px);
}

/* === Slider ok butonları: sabit + saydam cam görünüm === */
#prevBtn, #nextBtn {
  /* görünüm */
  background: rgba(0,0,0,0.15) !important;   /* saydam cam hissi */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--accent) !important;           /* ikon rengi */
  border: 2px solid var(--accent) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);

  /* konum stabilitesi */
  transform: translateZ(0);                  /* GPU sabitleme */
  transform-origin: center center;
  will-change: filter, background-color, color, border-color;

  /* hover’da aşağı kaymayı önle: translate/scale YOK */
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    filter .25s ease;
}

/* ikon rengi buton rengiyle birlikte değişsin */
#prevBtn i, #nextBtn i { color: currentColor !important; }

/* Hover: içi dolsun, cam kalksın */
#prevBtn:hover, #nextBtn:hover {
  background: var(--accent) !important;
  color: var(--accentText) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.24);
  /* hiçbir translate/scale yok -> pozisyon sabit */
}

/* Active: hafif gölge azalt, yine hareket yok */
#prevBtn:active, #nextBtn:active {
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

/* Koyu temada kenar daha soft dursun */
.theme-dark #prevBtn,
.theme-dark #nextBtn {
  border-color: color-mix(in oklab, var(--accent) 75%, black 25%);
}




/* Koyu temada okların kenarı daha yumuşak dursun */
.theme-dark #prevBtn,
.theme-dark #nextBtn {
  border-color: transparent;
}

/* --- "Projeni Konuşalım" (index ve projelerimiz sayfasındaki) hover uyumu --- */
/* Bu seçimci, linkin hem index’te hem projelerimizde border’lı versiyonunu kapsar */
a[href="#iletisim"].border {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
a[href="#iletisim"].border:hover {
  background: var(--accent);
  color: var(--accentText);
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}

/* İkonlar buton rengiyle birlikte değişsin */
#prevBtn i, #nextBtn i,
a[href="#iletisim"].border i {
  color: currentColor;
}


/* --- Slider ok butonlarının konumunu ayarla --- */
#prevBtn, #nextBtn {
  position: absolute;
  top: 40%;                      /* butonu daha yukarı alır */
  transform: translateY(-50%);   /* dikeyde ortalamak için */
  z-index: 20;

  /* mevcut renk/saydamlıklar bozulmadan kalsın */
}

/* Sol ok biraz dışarı çıksın */
#prevBtn {
  left: -28px;   /* negatif değer = kartın dışına taşı */
}

/* Sağ ok biraz dışarı çıksın */
#nextBtn {
  right: -28px;
}


/* === Ok butonları: açık/dark temaya göre görünürlük === */
:root{
  /* Açık tema için cam gibi toz pembe arkaplan + kırmızı ikon */
  --arrow-bg: rgba(246, 208, 216, .85);    /* toz pembe, saydam */
  --arrow-fg: #c4001a;                     /* kırmızı ikon */
  --arrow-border: rgba(196, 0, 26, .25);   /* yumuşak çerçeve */
}
.theme-dark{
  /* Koyu tema: daha şeffaf cam, pembe ikon */
  --arrow-bg: rgba(12, 13, 18, .35);       /* koyu cam */
  --arrow-fg: var(--accent);               /* pembe ikon */
  --arrow-border: rgba(255,255,255,.12);
}

#prevBtn, #nextBtn{
  background: var(--arrow-bg) !important;
  color: var(--arrow-fg) !important;
  border: 1px solid var(--arrow-border) !important;
  backdrop-filter: blur(8px);              /* cam efekti */
  -webkit-backdrop-filter: blur(8px);
}

/* Hover'da temayla uyumlu invert/parlama */
#prevBtn:hover, #nextBtn:hover{
  background: var(--accent) !important;
  color: var(--accentText) !important;
  border-color: var(--accent) !important;
}

/* İkon rengi butonla birlikte değişsin */
#prevBtn i, #nextBtn i{ color: currentColor !important; }


/* === Scroll-Reveal: temel === */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    transform 1.2s cubic-bezier(.22,.61,.36,1),
    opacity 1.2s ease,
    filter 1.2s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Metinleri satır satır kaldıralım (stagger) */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: transform 1s ease, opacity 1s ease;
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}
/* gecikmeler */
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:.1s }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.25s }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.4s }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.55s }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:.7s }

/* === Sadece AÇIK tema için (dark değilken) daha belirgin gri zeminler === */
:root{
  /* Daha görünür gri istiyorsan bu tonu değiştir: #f2f3f5  (daha koyu: #ededf0) */
  --sectionBgLight: #f2f3f5;
}

/* === Açık tema için üst bar (logo + menü) daha belirgin gri + saydam === */
body:not(.theme-dark) .site-header{
  background-color: rgba(242, 243, 245, 0.55); /* gri + %85 opaklık */
  backdrop-filter: blur(10px); /* cam efekti korunsun */
  -webkit-backdrop-filter: blur(10px);
}

/* Referanslar bölümü (bg-white sınıfı var, o yüzden !important) sadece AÇIK tema */
body:not(.theme-dark) section.bg-white{
  background-color: var(--sectionBgLight) !important;
}

/* Hizmetler ve Müşteri Yorumları sadece AÇIK tema */
body:not(.theme-dark) #hizmetler,
body:not(.theme-dark) #yorumlar{
  background-color: var(--sectionBgLight);
}

/* Koyu temada bu bölümler asla griye dönmesin (gerekirse açıkça reset) */
.theme-dark .site-header{
  background-color: rgba(15,15,18,.75);
  backdrop-filter: blur(12px);
}
.theme-dark section.bg-white{
  background-color: var(--card) !important;
}
.theme-dark #hizmetler,
.theme-dark #yorumlar{
  background-color: var(--bg);
}

/* === Dropdown (Projeler alt menü) — gap yok === */
.has-sub{ position: relative; }

.submenu{
  top: 100%;                 /* butonun tam dibinden başlasın => hover kopmasın */
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  z-index: 70;
}

.submenu .sub-link{
  display:block; padding:.6rem .9rem; font-size:.95rem;
  transition: background-color .2s ease, color .2s ease;
}

.submenu .sub-link:hover{
  background: color-mix(in oklab, var(--accent) 18%, var(--card) 82%);
  color: var(--accentText);
}

.submenu .sub-sep{ height:1px; margin:.25rem 0; background:var(--border); }

/* Fare olan cihazlarda hover ile açık kalsın */
@media (hover:hover){
  .has-sub:hover > .submenu{ display:block; }
}

  /* Tema ile uyumlu marka pembesi */
  :root{ --accentBrand:#ff5b8a; }
  .theme-dark{ --accentBrand:#ff6a99; }

  /* Nokta (DELFF.) rengi */
  .brand-dot, .intro-dot{ color: var(--accentBrand); }

  /* Intro: sayfa bulanıkken */
  body.intro-running > :not(#introOverlay){ 
    filter: blur(14px) saturate(.9) brightness(0.99);
    transition: filter 900ms ease;
  }

  /* Intro overlay */
  #introOverlay{
    position:fixed; inset:0; z-index:70;
    display:grid; place-items:center;
    background:rgba(255,255,255,.78); backdrop-filter: blur(8px);
    transition: opacity .5s ease;
  }
  .theme-dark #introOverlay{ background:rgba(10,12,14,.7); }

  /* Ortadaki kutu (başlık) */
  .intro-box{
    position:relative;
    will-change: transform, opacity;
    transform: translateZ(0);
  }

  /* Başlık: harf harf animasyon */
  .intro-title{
    font-family: "Sora", system-ui, ui-sans-serif;
    font-weight: 800;
    letter-spacing: .02em;
    font-size: clamp(52px, 9vw, 116px);
    line-height: 1;
  }
  .intro-row{
    display:flex; align-items:baseline; gap:.06em;
    justify-content:center;
  }
  .intro-ch{
    opacity:0; transform: translateY(18px) scale(.98);
    animation: introUp .6s cubic-bezier(.2,.8,.2,1) forwards;
  }
  /* sırayla gelsin */
  .intro-ch:nth-child(1){ animation-delay: .00s }
  .intro-ch:nth-child(2){ animation-delay: .06s }
  .intro-ch:nth-child(3){ animation-delay: .12s }
  .intro-ch:nth-child(4){ animation-delay: .18s }
  .intro-ch:nth-child(5){ animation-delay: .24s }
  .intro-ch.intro-dot{ animation-delay: .34s }

  @keyframes introUp{
    from{ opacity:0; transform: translateY(18px) scale(.98) }
    to  { opacity:1; transform: translateY(0)    scale(1)   }
  }

  .intro-sub{
    margin-top:16px;
    font: 600 14px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
    color: #6b7280;
    text-align:center;
  }
  .theme-dark .intro-sub{ color:#9aa2ad; }

  /* hareket biterken overlayi gizle */
  #introOverlay.is-done{ opacity:0; pointer-events:none; }

  /* --- DELFF. sonundaki nokta: sade metin noktası --- */
.brand-dot{
  display:inline;           /* kutu değil, normal karakter */
  width:auto; height:auto;  /* önceki genişlik/yüksekliği sıfırla */
  border-radius:0; box-shadow:none; background:transparent;
  color: var(--accentBrand);
  transform: none;          /* hizalama düz */
}

/* --- Intro: rozet + halka --- */
#introOverlay{
  position:fixed; inset:0; z-index:70;
  display:grid; place-items:center;
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(8px);
  transition: opacity .5s ease;
}
.theme-dark #introOverlay{ background:rgba(10,12,14,.7); }

body.intro-running > :not(#introOverlay){
  filter: blur(14px) saturate(.9) brightness(.99);
  transition: filter 900ms ease;
}

#introOverlay.is-done{ opacity:0; pointer-events:none; }

/* Rozet kutusu */
.intro-badge{
  position:relative;
  width:min(78vmin,780px);
  aspect-ratio: 7 / 3.4;          /* geniş bir rozet alanı */
  display:grid; place-items:center;
  will-change: transform, opacity;
  transform: translateZ(0);
  opacity:0; transform: scale(.9);
  animation: introBadgeIn .6s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes introBadgeIn{
  to{ opacity:1; transform: scale(1) }
}

/* Dış halka (boş logo) */
.intro-ring{
  position:absolute; inset:auto 0 32% 0; margin:auto;
  width: min(24vmin, 240px); aspect-ratio:1/1; border-radius:9999px;
  box-shadow:
    0 0 0 10px color-mix(in oklab, var(--accentBrand) 35%, transparent),
    0 8px 30px rgba(0,0,0,.18);
  border: 3px solid var(--accentBrand);
}

/* Yazı: harf harf görünür */
.intro-title{
  font-family: "Sora", system-ui, ui-sans-serif;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: clamp(52px, 9vw, 116px);
  line-height: 1;
  text-align:center;
  color: var(--text);
}
.intro-word{
  display:flex; gap:.06em; align-items:baseline; justify-content:center;
  translate: 0 14%;
}
.intro-ch{
  opacity:0; transform: translateY(18px) scale(.98);
  animation: introUp .6s cubic-bezier(.2,.8,.2,1) forwards;
}
.intro-ch:nth-child(1){ animation-delay:.20s }
.intro-ch:nth-child(2){ animation-delay:.26s }
.intro-ch:nth-child(3){ animation-delay:.32s }
.intro-ch:nth-child(4){ animation-delay:.38s }
.intro-ch:nth-child(5){ animation-delay:.44s }
.intro-ch.intro-dot{ animation-delay:.54s; color: var(--accentBrand); }

@keyframes introUp{
  from{ opacity:0; transform: translateY(18px) scale(.98) }
  to  { opacity:1; transform: translateY(0)    scale(1)   }
}