/* ==========================================================================
   FILE   : assets/index.css
   PAGE   : index.php (front)
   SCOPE  : Index’e özel yerleşim + snap akışı + efektler
   ========================================================================== */

/* == 00: Variables ========================================================= */
:root{
  --header-h: 56px;
  --safe-gap: 12px;
  --service-card-h: 360px;
  --featured-media-h: 190px;
}

/* == 01: Page frame (header üst ofset) ==================================== */
body.page-index{
  padding-top: 0 !important;        /* ilk bölüm kendi paddingini kullanır */
}
body.page-index::before{ display:none !important; }
body.page-index .glass-header{
  top:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  transform:translateZ(0);
}

/* == 02: Snap container ==================================================== */
#snap-container{
  position:relative;
  height: 100dvh;                     /* dinamik viewport */
  min-height: 100svh;                 /* iOS güvenlik */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;  /* iOS momentum */
  scroll-snap-type: y mandatory;      /* bölüm hizalama */
  scroll-behavior: auto !important;   /* JS ile çakışmasın */
  scrollbar-width: none;
}
#snap-container::-webkit-scrollbar{ display:none; }

/* == 03: Bölüm iskeleti ==================================================== */
.snap-section{
  position:relative;
  min-height: 100%;
  display:grid;
  place-items:center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow:hidden;
  padding: clamp(24px, 6vh, 64px) 0;
}
.snap-section:first-child .snap-inner{
  padding-top: calc(var(--header-h) + var(--safe-gap));
}

/* Arkaplan (video/img) */
.snap-section .snap-bg{ position:absolute; inset:-1px; z-index:0; overflow:hidden; }
.snap-section .snap-bg::after{
  content:""; position:absolute; inset:-1px;
  background:
    radial-gradient(1000px 600px at 70% 20%, rgba(0,0,0,.08), rgba(0,0,0,.30)),
    linear-gradient(0deg, rgba(0,0,0,.15), rgba(0,0,0,.15));
}
.snap-section .snap-bg video,
.snap-section .snap-bg img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(110%) contrast(105%);
}

/* İçerik alanı */
.snap-inner{ position:relative; z-index:1; width:min(1100px, 92%); color:#fff; }
.snap-inner.center{ text-align:center; }

/* == 10: Hero / Başlıklar / CTA =========================================== */
.hero-title{ font-size: clamp(28px, 5.2vw, 56px); margin:0 0 10px; line-height:1.12; }
.hero-sub{   font-size: clamp(14px, 2vw, 18px);  opacity:.95; margin:0 0 20px; }

.btn{
  display:inline-block; padding:12px 20px; border-radius:999px;
  text-decoration:none; font-weight:700; background:#fff; color:#0b223a;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow:0 14px 30px rgba(0,0,0,.22); }
.btn-primary{ background:#fff; color:#0077b6; }

/* == 11: Hero – mobil ok (butonun altı) =================================== */
/* Masaüstünde görünmesin */
.mobile-down-arrow{ display:none; }

@media (max-width: 768px){
  /* buton + ok sarıcı */
  #hero .hero-cta{
    position: relative;       /* okun referansı */
    display: inline-block;
  }
  /* ok: butonun ALTINA sabit, ortalı */
  #hero .hero-cta .mobile-down-arrow{
    display:block;
    position:absolute;
    left:50%;
    transform: translateX(-50%);
    top: calc(100% + 100px);   /* ↓ mesafe: artır/azalt */
    width:46px; height:46px;  /* boyut */
    pointer-events:none;      /* tıklanmaz */
    opacity:.96;
  }
  #hero .hero-cta .mobile-down-arrow img{
    width:100%; height:100%; display:block;
    animation: arrow-bob 1.4s infinite ease-in-out;
  }
  @keyframes arrow-bob{
    0%{   transform: translateY(0); }
    60%{  transform: translateY(6px); }
    100%{ transform: translateY(0); }
  }
}

/* == 20: Hizmetler ========================================================= */
#services .snap-inner{ width: min(1320px, 95%); }
#services .services{ margin-top:22px; }
#services .card{
  height: var(--service-card-h);
  display:flex; flex-direction:column; gap:6px;
  border-radius:16px; overflow:hidden;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}
#services .card .icon{
  flex:0 0 calc(var(--service-card-h) * .70);
  width:100%; height:calc(var(--service-card-h) * .70);
  object-fit:cover; object-position:center; background:#fff;
  display:block;
}
#services .card h3, #services .card p{
  color:#0b223a !important; text-shadow:none; text-align:center; margin:0; padding:0 12px;
}
#services .card h3{ font-weight:800; font-size:clamp(16px,1.6vw,20px); margin-top:auto; }
#services .card p{ font-size:14px; opacity:.9; margin-bottom:auto; }

/* == 30: Öne Çıkanlar (Featured) ========================================== */
#featured{ overflow:visible; }
#featured .snap-inner{ padding-top: calc(var(--header-h) + 8px); }
#featured .fgrid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:20px; margin-top:18px; }
#featured .fcard{
  display:block; border-radius:16px;
  background:rgba(0,0,0,.20); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 28px rgba(0,0,0,.25); overflow:hidden; backdrop-filter: blur(2px);
  transition: transform .15s ease, box-shadow .2s ease; text-decoration:none;
}
#featured .fcard:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 12px 36px rgba(0,0,0,.30); }
#featured .fcard-media{ width:100%; height: var(--featured-media-h); background:#0b223a; }
#featured .fcard-media img{ width:100%; height:100%; object-fit:cover; display:block; }
#featured .fcard-cap{ padding:8px 10px; text-align:center; color:#fff; font-weight:700; font-size:13px; }
#featured .fcard-empty{ border:2px dashed rgba(255,255,255,.45); background:transparent; box-shadow:none; }
#featured .fcard-empty .fcard-media{ background:transparent; }

/* == 40: Blog ============================================================= */
#blog .snap-inner{ padding-top: calc(var(--header-h) - 4px); }
#blog .bstack{ display:flex; flex-direction:column; gap:14px; margin-top:8px; }
#blog .bstack .bcard:nth-child(n+4){ display:none; }
#blog .bcard{
  display:flex; align-items:center; gap:16px;
  padding:12px; border-radius:16px; text-decoration:none;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  color:#0b223a;
  transition: transform .15s ease, box-shadow .2s ease;
}
#blog .bcard:hover{ transform: translateY(-1px) scale(1.01); box-shadow:0 14px 30px rgba(0,0,0,.22); }
#blog .bthumb{ flex:0 0 200px; height:112px; border-radius:12px; overflow:hidden; background:#e6eef6; }
#blog .bthumb img{ width:100%; height:100%; object-fit:cover; display:block; }
#blog .bmeta{ flex:1; min-width:0; }
#blog .btitle{ margin:0 0 6px; font-size: clamp(16px, 1.8vw, 22px); font-weight:800; color:#0b223a; }
#blog .bex{ margin:0; font-size:14px; color:#233543; opacity:.9;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient: vertical; overflow:hidden; }
#blog .bcard.bempty{ background: rgba(255,255,255,.75); }

/* == 50: CTA / Quick Links ================================================ */
.quick-links{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.quick-links .btn{ background:#ffffffcc; }

/* == 60: Scroll indicator ================================================== */
.scroll-hint{ position:absolute; bottom:1px; left:50%; transform:translateX(-50%); text-decoration:none; }
.scroll-hint .dot{ display:inline-block; width:12px; height:32px; border-radius:12px; background:#fff; opacity:.9; animation: hint 1.4s infinite ease-in-out; }
@keyframes hint{ 0%{transform:translateY(0)} 60%{transform:translateY(8px)} 100%{transform:translateY(0)} }

.scroll-indicator{
  position:fixed; top:50%; right:20px; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:10px; z-index:1002; pointer-events:none;
}
.scroll-indicator button{
  pointer-events:auto; width:12px; height:12px; border-radius:50%; border:0;
  background:rgba(255,255,255,.55); cursor:pointer; transition: transform .2s, background .2s;
}
.scroll-indicator button.active{ background:#fff; transform:scale(1.35); }

/* == 70: Footer seam fix =================================================== */
body.page-index .site-footer{ display:none !important; }
#footer-section{ min-height: calc(100% + 2px); overflow:visible; }
#footer-section .snap-bg, #footer-section .snap-bg::after{ inset:-2px !important; transform:translateZ(0); }
#footer-section .snap-inner{ padding-top: calc(var(--header-h) + 8px); display: flow-root; }

/* == 90: Section geçişleri ================================================ */
.snap-section .snap-inner{
  will-change: opacity, transform, filter;
  transition: opacity .45s ease,
              transform .55s cubic-bezier(.22,.61,.36,1),
              filter .35s ease;
}
.snap-section.entering .snap-inner{ opacity:0; transform: translateY(18px);   filter:none; }
.snap-section.leaving  .snap-inner{ opacity:0; transform: translateY(-12px) scale(.995); filter: blur(.5px); }
.snap-section.is-current .snap-inner{ opacity:1; transform:none; filter:none; }
@media (prefers-reduced-motion: reduce){
  .snap-section .snap-inner{ transition: none !important; }
}

/* == 95: Reveal v2 ========================================================= */
:root{ --rv-step: 90ms; }
body.rv-ready :where([data-reveal]){
  opacity:0; transform: var(--rv-transform, translateY(16px));
  filter: var(--rv-filter, none);
  transition:
    opacity var(--rv-dur, .6s) ease,
    transform var(--rv-dur, .6s) cubic-bezier(.22,.61,.36,1),
    filter var(--rv-dur, .6s) ease;
  transition-delay: var(--rv-delay, 0s);
  will-change: opacity, transform, filter;
}
body.rv-ready :where([data-reveal]).is-revealed{ opacity:1; transform:none; filter:none; }
[data-reveal="up"]    { --rv-transform: translateY(16px); }
[data-reveal="down"]  { --rv-transform: translateY(-16px); }
[data-reveal="left"]  { --rv-transform: translateX(-18px); }
[data-reveal="right"] { --rv-transform: translateX(18px); }
[data-reveal="zoom"]  { --rv-transform: scale(.96); --rv-filter: blur(.5px); }
[data-reveal="fade"]  { --rv-transform: none; }
[data-reveal-group] [data-reveal]{ transition-delay: calc(var(--rv-delay, 0s) + (var(--rv-index, 0) * var(--rv-step))); }
@media (prefers-reduced-motion: reduce){
  body.rv-ready :where([data-reveal]){ transition:none !important; opacity:1 !important; transform:none !important; filter:none !important; }
}

/* == 99: Responsive grid kırılımları ====================================== */
@media (max-width:1280px){ #featured .fgrid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:1100px){
  .grid-4, .slots-4{ grid-template-columns: repeat(2,1fr); }
  #featured .fgrid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width:980px){ #blog .bthumb{ flex-basis:170px; height:105px; } }
@media (max-width:720px){ #blog .bthumb{ flex-basis:140px; height:100px; } }
@media (max-width:640px){
  .grid-4, .slots-4{ grid-template-columns: 1fr; }
  #featured .fgrid{ grid-template-columns: 1fr; }
}
@media (max-width:560px){
  #blog .bcard{ flex-direction:row; align-items:flex-start; }
  #blog .bthumb{ flex-basis:120px; height:92px; }
  .scroll-indicator{ right:10px; }
}

/* === Mobile overrides: snap kapalı, CTA+Footer yakın ===================== */
@media (max-width: 768px){
  /* Snap akışını kapat, normal scroll */
  #snap-container{
    height:auto !important;
    min-height:0 !important;
    overflow-y:visible !important;
    scroll-snap-type:none !important;
  }

  /* Her section neredeyse tam ekran kalsın */
  .snap-section{
    min-height: calc(100svh - var(--header-h)) !important;
    padding: 32px 0 40px !important;
    scroll-snap-align: unset !important;
    scroll-snap-stop: normal !important;
    display:grid; place-items:center;
  }

  /* Dot-nav ve hint gizli */
  .scroll-indicator, #dotNav, .scroll-hint{ display:none !important; }

  /* Giriş/çıkış animasyonlarını nötrle */
  .snap-section .snap-inner{
    transition:none !important; opacity:1 !important; transform:none !important; filter:none !important;
  }

  /* 5 (CTA) ve 6 (Footer) birbirine yakın */
  #cta.snap-section,
  #footer-section.snap-section{
    min-height: auto !important;
    padding: 18px 0 22px !important;
  }
  #cta{ padding-bottom: 8px !important; }
  #footer-section{ padding-top: 6px !important; }
}

/* === Interactive hover/tilt ============================================== */
.tilt-ready .tilt-card{
  cursor: pointer;
  will-change: transform, box-shadow;
  transform-style: preserve-3d;
  transition: transform .16s ease, box-shadow .2s ease;
}
.tilt-card .fcard-media,
.tilt-card .bthumb{
  transform: translateZ(10px) scale(1.02);
  transition: transform .2s ease;
}
body.page-index.tilt-ready #featured .fcard:hover,
body.page-index.tilt-ready #blog .bcard:hover{
  transform: none; box-shadow: inherit;
}
.tilt-ready .tilt-card.tilt-shadow{ box-shadow: 0 16px 36px rgba(0,0,0,.22) !important; }
.tilt-ready .tilt-card.tilt-press{  transform: translateY(-2px) scale(.98) !important; }

/* === Section headers center fix (index) === */
.section-header{
  text-align: center;
}
.section-header > p{
  margin-left: auto;
  margin-right: auto;
}