/* ==========================================================================
   FIORA REAXION — BOLUM DUZENLERI
   baslik · hero · surec · urun · yorumlar · sss · alt bilgi
   ========================================================================== */

/* ================================================================ BASLIK
   Referans olculeri: duz #08122C zemin, 80px yukseklik, cizgi yok,
   ic kapsayici 1270px, yan bosluk 16px.
   Ustunde AYRI BIR BANT YOKTUR — iletisim bilgileri alt bilgide.
   ================================================================ */

.fr-header {
  position: sticky;
  top: 0;
  z-index: var(--fr-z-header);
  background: var(--fr-header-bg);
  transition: box-shadow var(--fr-t-base);
}

/* Sayfa kaydirilinca yalnizca hafif bir golge — renk degismez */
.fr-header[data-scrolled="true"] {
  box-shadow: 0 8px 24px -14px rgba(0, 0, 0, .7);
}

.fr-header__inner {
  width: 100%;
  max-width: 1270px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.fr-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fr-sp-4);
  height: 5rem;   /* 80px — referansla ayni */
}

/* --- logo --- */

.fr-brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: var(--fr-text-on-dark);
  flex: none;
}

/* Logoda HOVER ETKISI YOK.
   base.css'teki genel "a:hover" kurali (0,1,1) buraya da uyuyor ve
   yaziyi koyu laciverte cevirip koyu zeminde okunmaz yapiyordu.
   Asagidaki kurallar onu kesin olarak susturur. */
.fr-brand:hover,
.fr-brand:focus,
.fr-brand:active {
  color: var(--fr-text-on-dark);
  transform: none;
  opacity: 1;
  text-decoration: none;
}
.fr-brand,
.fr-brand * { transition: none; }

/* Vurgulu kelime hover'da da ayni sampanya renginde kalir (blok yok) */
.fr-brand:hover .fr-brand__accent,
.fr-brand:focus .fr-brand__accent {
  color: var(--fr-sand-400);
  background: none;
}

/* Logo altı küçük yazı hover'da da aynı kalır */
.fr-brand:hover .fr-brand__tag { color: var(--fr-gray-400); }

/* Sac teli isareti — sampanya gradyaniyla boyanir */
.fr-brand__mark {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  display: block;
}
@media (min-width: 768px) {
  .fr-brand__mark { width: 2.625rem; height: 2.625rem; }
}

.fr-brand__text {
  display: flex;
  flex-direction: column;
  gap: .1875rem;
  line-height: 1;
}

.fr-brand__name {
  display: flex;
  align-items: baseline;
  gap: .375em;
  font-size: 1.0625rem;
  font-weight: var(--fr-fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .fr-brand__name { font-size: 1.25rem; }
}

/* Markanin ikinci kelimesi sampanya tonunda.
   NOT: background-clip:text bazi ortamlarda kelimeyi dolu bir BLOK
   olarak gosteriyordu; bu yuzden dolu renk kullaniyoruz — her yerde
   guvenle, okunur sekilde render edilir. */
.fr-brand__accent {
  color: var(--fr-sand-400);
  background: none;
}

.fr-brand__tag {
  font-size: .5625rem;
  font-weight: var(--fr-fw-medium);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--fr-gray-400);
}

/* --- gezinti --- */

.fr-nav { display: none; }

@media (min-width: 1100px) {
  .fr-nav { display: block; margin-inline-start: auto; }

  .fr-nav__list {
    display: flex;
    align-items: center;
    gap: 1.375rem;
    margin: 0; padding: 0;
    list-style: none;
  }
  .fr-nav__list li { margin: 0; }

  .fr-nav__list a {
    display: block;
    color: var(--fr-white);
    font-size: .8125rem;      /* referans: 12px, 1px buyuttuk okunurluk icin */
    font-weight: var(--fr-fw-regular);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--fr-t-fast);
  }
  .fr-nav__list a:hover { color: var(--fr-sand-400); }

  .fr-nav__list .current-menu-item > a,
  .fr-nav__list .current_page_item > a { color: var(--fr-sand-400); }

  /* --- Acilir alt menu ("Kurumsal" gibi) --- */
  .fr-nav__list li.menu-item-has-children { position: relative; }

  .fr-nav__list li.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: .375rem; height: .375rem;
    margin-left: .375rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--fr-t-fast);
  }
  .fr-nav__list li.menu-item-has-children:hover > a::after,
  .fr-nav__list li.menu-item-has-children:focus-within > a::after {
    transform: translateY(0) rotate(225deg);
  }

  .fr-nav__list .sub-menu {
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%) translateY(-.5rem);
    z-index: var(--fr-z-header);
    min-width: 11rem;
    margin: 0; padding: .5rem;
    list-style: none;
    background: var(--fr-navy-950);
    border: 1px solid var(--fr-line-dark);
    border-radius: var(--fr-r-md);
    box-shadow: var(--fr-shadow-xl);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--fr-t-fast), transform var(--fr-t-fast), visibility 0s linear var(--fr-t-fast);
  }
  .fr-nav__list li.menu-item-has-children:hover > .sub-menu,
  .fr-nav__list li.menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity var(--fr-t-fast), transform var(--fr-t-fast), visibility 0s linear 0s;
  }

  .fr-nav__list .sub-menu li { margin: 0; }
  .fr-nav__list .sub-menu a {
    padding: .5rem .75rem;
    border-radius: var(--fr-r-sm);
    white-space: nowrap;
  }
  .fr-nav__list .sub-menu a:hover { background: rgba(255,255,255,.08); }
}

.fr-header__actions {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex: none;
  margin-inline-start: auto;
}
@media (min-width: 1100px) {
  .fr-header__actions { margin-inline-start: 1.75rem; }
}

/* Basliktaki sampanya buton — referans olculeri */
.fr-header__cta {
  display: none;
  --fr-btn-py: .625rem;      /* 10px */
  --fr-btn-px: 1.5rem;       /* 24px */
  font-size: var(--fr-fs-sm);
}
@media (min-width: 560px) { .fr-header__cta { display: inline-flex; } }

/* Dil / dunya dugmesi */
.fr-header__lang {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 0;
  border-radius: var(--fr-r-pill);
  background: transparent;
  color: var(--fr-white);
  text-decoration: none;
  transition: background var(--fr-t-fast), color var(--fr-t-fast);
}
.fr-header__lang:hover {
  background: rgba(255, 255, 255, .1);
  color: var(--fr-sand-400);
}
.fr-header__lang svg { width: 1.25rem; height: 1.25rem; }

/* --- mobil menu dugmesi --- */

.fr-burger {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 0;
  border-radius: var(--fr-r-pill);
  background: transparent;
  color: var(--fr-white);
  transition: background var(--fr-t-fast);
}
.fr-burger:hover { background: rgba(255, 255, 255, .1); }
@media (min-width: 1100px) { .fr-burger { display: none; } }

.fr-burger__box { position: relative; width: 1.125rem; height: .875rem; }
.fr-burger__box span {
  position: absolute;
  left: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--fr-t-base), opacity var(--fr-t-fast);
}
.fr-burger__box span:nth-child(1) { top: 0; }
.fr-burger__box span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.fr-burger__box span:nth-child(3) { bottom: 0; }

.fr-burger[aria-expanded="true"] .fr-burger__box span:nth-child(1) {
  top: 50%; transform: translateY(-50%) rotate(45deg);
}
.fr-burger[aria-expanded="true"] .fr-burger__box span:nth-child(2) { opacity: 0; }
.fr-burger[aria-expanded="true"] .fr-burger__box span:nth-child(3) {
  bottom: 50%; transform: translateY(50%) rotate(-45deg);
}

/* --- mobil panel: sagdan sola kayan off-canvas --- */

.fr-mobile {
  position: fixed;
  inset: 0;
  z-index: var(--fr-z-modal);
  background: rgba(8, 18, 44, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fr-t-slow), visibility 0s linear var(--fr-t-slow);
}
.fr-mobile[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--fr-t-slow), visibility 0s;
}
@media (min-width: 1100px) { .fr-mobile { display: none; } }

.fr-mobile__inner {
  position: absolute;
  top: 0;
  right: 0;
  width: min(85vw, 22rem);
  height: 100%;
  height: 100dvh;
  overflow-y: auto;
  background: var(--fr-navy-950);
  border-left: 1px solid var(--fr-line-dark);
  box-shadow: -24px 0 48px rgba(8, 18, 44, .4);
  transform: translateX(100%);
  transition: transform var(--fr-t-slow);
}
.fr-mobile[data-open="true"] .fr-mobile__inner { transform: translateX(0); }

/* Panel acikken baslikteki hamburger dugmesi panelin ALTINDA kalir;
   kapatma icin panelin kendi dugmesi kullanilir. */
.fr-mobile__kapat {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  margin: var(--fr-sp-3) var(--fr-sp-3) 0 auto;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--fr-line-dark);
  border-radius: var(--fr-r-pill);
  background: var(--fr-navy-900);
  color: var(--fr-text-on-dark);
  cursor: pointer;
  transition: background var(--fr-t-fast);
}
.fr-mobile__kapat:hover { background: rgba(255, 255, 255, .1); }
.fr-mobile__kapat svg { width: 1.125rem; height: 1.125rem; }

.fr-mobile__body {
  padding: var(--fr-sp-4) var(--fr-gutter) var(--fr-sp-6);
}

.fr-mobile__list {
  margin: 0 0 var(--fr-sp-5);
  padding: 0;
  list-style: none;
}
.fr-mobile__list li { margin: 0; }
.fr-mobile__list li + li { border-top: 1px solid var(--fr-line-dark); }
.fr-mobile__list a {
  display: block;
  padding: var(--fr-sp-4) 0;
  color: var(--fr-text-on-dark);
  font-size: var(--fr-fs-md);
  font-weight: var(--fr-fw-medium);
  text-decoration: none;
}
.fr-mobile__list a:hover { color: var(--fr-accent-soft); }

/* "Kurumsal" gibi bir grup basligi — tiklanamaz, sadece etiket.
   Alt ogeleri (sub-menu) HER ZAMAN girintili ve acik listelenir;
   mobilde ekstra JS/aç-kapa gerektirmeyen en saglam yontem budur. */
.fr-mobile__list li.menu-item-has-children > a {
  pointer-events: none;
  color: var(--fr-accent-soft);
  font-size: var(--fr-fs-sm);
  font-weight: var(--fr-fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-bottom: var(--fr-sp-2);
}

.fr-mobile__list .sub-menu {
  margin: 0 0 var(--fr-sp-2);
  padding: 0;
  list-style: none;
}
.fr-mobile__list .sub-menu li { margin: 0; border-top: 0 !important; }
.fr-mobile__list .sub-menu a {
  padding: var(--fr-sp-3) 0 var(--fr-sp-3) var(--fr-sp-4);
  font-size: var(--fr-fs-base);
  font-weight: var(--fr-fw-regular);
  position: relative;
}
.fr-mobile__list .sub-menu a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: .375rem; height: .375rem;
  transform: translateY(-50%);
  border-radius: var(--fr-r-pill);
  background: var(--fr-line-dark);
}

/* ================================================================ HERO */

.fr-hero {
  position: relative;
  overflow: hidden;
  background: var(--fr-navy-900);
  color: var(--fr-text-on-dark);
  isolation: isolate;
}

/* --- arka plan: video veya gorsel --- */

.fr-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--fr-navy-950);
}

/* Poster ve video ust uste biner (ikisi de mutlak konumlu).
   DIKKAT: burada "display" TANIMLANMAZ — asagidaki gorunurluk
   kurallariyla cakisirdi (.fr-hero__media video ozgullugu daha yuksek). */
.fr-hero__media img,
.fr-hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* YouTube arka plani: iframe object-fit tanimaz, bu yuzden 16:9'u
   ekrani KAPLAYACAK sekilde buyutup ortalariz (klasik full-bleed teknigi).
   Kenarlar tasar, kirpilir; siyah bant kalmaz. */
.fr-hero__yt {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;   /* tiklamalar hero butonlarina gitsin */
}
.fr-hero__yt iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Genislige gore 16:9 (yataysa tasar) VE yukseklige gore 16:9
     (dikeyse tasar) — hangisi buyukse o kazanir, boylece daima kaplar. */
  width: 100vw;
  height: 56.25vw;         /* 100vw * 9/16 */
  min-width: 177.78vh;     /* 100vh * 16/9 */
  min-height: 100vh;
  border: 0;
}

/* Gorunurluk kurallari — hepsi ayni ozgullukte (.fr-hero__media + sinif)
   ki hangisinin kazandigi kaynak sirasindan belli olsun. */
.fr-hero__media .fr-hero__poster { display: block; }

/* Video HER cihazda oynar (mobil dahil). Poster yalnizca video
   yuklenene kadar arkada durur. */
.fr-hero__media .fr-hero__video { display: block; }

/* NOT: Burada eskiden "prefers-reduced-motion" ile video GIZLENIYORDU.
   iOS'ta Dusuk Guc Modu bu tercihi "reduce" olarak bildirdigi icin
   telefonlarda video hic gorunmuyordu — kural kaldirildi. Video sessiz,
   dekoratif ve dongusel oldugundan her cihazda oynatilir. */

/* --- lacivert perde (overlay) --- */

.fr-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* --fr-veil-* degerleri yogunluk sinifiyla degisir */
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(155, 129, 108, var(--fr-veil-glow, .22)) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(8, 18, 44,  var(--fr-veil-top, .82)) 0%,
      rgba(13, 24, 57, var(--fr-veil-mid, .90)) 55%,
      rgba(13, 24, 57, var(--fr-veil-bot, 1)) 100%);
}

/* Video yokken alt kenar tam lacivert kapanir (bolume kaynasir) */
.fr-hero:not(.fr-hero--has-video):not(.fr-hero--has-poster) .fr-hero__veil {
  background: var(--fr-grad-dark);
}

/* Yogunluk kademeleri */
.fr-hero--veil-hafif .fr-hero__veil {
  --fr-veil-top: .58;
  --fr-veil-mid: .62;
  --fr-veil-bot: .88;
  --fr-veil-glow: .18;
}

.fr-hero--veil-orta .fr-hero__veil {
  --fr-veil-top: .78;
  --fr-veil-mid: .84;
  --fr-veil-bot: .96;
  --fr-veil-glow: .22;
}

.fr-hero--veil-yogun .fr-hero__veil {
  --fr-veil-top: .90;
  --fr-veil-mid: .93;
  --fr-veil-bot: .99;
  --fr-veil-glow: .26;
}

/* Video/gorsel varken hero biraz daha uzun dursun — sinema hissi */
.fr-hero--has-video .fr-hero__inner,
.fr-hero--has-poster .fr-hero__inner {
  padding-block: clamp(4.5rem, 3.5rem + 7vw, 9rem);
}

.fr-hero__inner {
  position: relative;
  padding-block: clamp(3.5rem, 3rem + 5vw, 7rem);
}

.fr-hero__lead { max-width: 44rem; }

.fr-hero__title {
  margin: 0 0 var(--fr-sp-5);
  font-size: var(--fr-fs-4xl);
  line-height: var(--fr-lh-tight);
  letter-spacing: var(--fr-ls-tight);
  font-weight: var(--fr-fw-light);
}

.fr-hero__title strong {
  display: block;
  font-weight: var(--fr-fw-semibold);
}

/* Aciklama: referans olcusu 16px / 24px satir / weight 400.
   Basliktan belirgin sekilde kucuk kalmasi gerekiyor. */
.fr-hero__text {
  margin: 0 0 var(--fr-sp-6);
  max-width: 34rem;
  font-size: var(--fr-fs-base);   /* 16px */
  font-weight: var(--fr-fw-regular);
  line-height: 1.5;               /* 24px */
  color: var(--fr-text-on-dark-soft);
}

.fr-hero__trust { margin-top: clamp(var(--fr-sp-7), 5vw, var(--fr-sp-9)); }

/* ---------------------------------------------------------------- */
/* TAM EKRAN GIRIS (masaustu)                                        */
/* ---------------------------------------------------------------- */
/* Hero ekranin tamamini kaplar. Baslik 5rem (80px) yer tuttugu icin
   yuksekligi "100vh - 80px"; boylece BASLIK + HERO tam bir ekran eder,
   altta kirpilmis serit kalmaz.

   Dikey bosluklar vh cinsinden verilir: icerik her ekran yuksekligine
   sigar, 1440x900 gibi kisa masaustlerinde tasma olmaz.

   NOT: Bu blok bilerek hero kurallarinin EN SONUNA konuldu — yukaridaki
   ".fr-hero--has-video .fr-hero__inner" (ozgulluk 0,2,0) dolgu kuralini
   ezebilmesi icin ayni ozgullukte ve daha sonra gelmesi gerekiyor. */
@media (min-width: 1024px) {
  .fr-hero {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 5rem);
    min-height: calc(100dvh - 5rem);
    /* Alt padding, dikey ortalama alanini asagidan daraltir; boylece
       icerik ekranin biraz DAHA YUKARISINDA durur (dead-center degil). */
    padding-bottom: clamp(3rem, 10vh, 8rem);
  }

  .fr-hero > .fr-container { width: 100%; }

  /* Dolgu KUCUK tutulur: uzun ekranlarda bosluğu min-height + dikey
     ortalama saglar, dolgunun buyuk olmasi yalnizca kisa ekranlarda
     tasmaya yol acar. */
  .fr-hero .fr-hero__inner { padding-block: clamp(1.25rem, 2.5vh, 2.5rem); }

  .fr-hero .fr-hero__trust { margin-top: clamp(1.5rem, 3.5vh, 3rem); }
}

/* Kisa masaustu ekranlarinda (ornek: 1366x600) icerik sigmazsa
   tam ekran zorlamasi kalkar, dogal yukseklige doner. */
@media (min-width: 1024px) and (max-height: 640px) {
  .fr-hero {
    min-height: 0;
    display: block;
  }
  .fr-hero .fr-hero__inner { padding-block: 2.5rem; }
}

/* GUVEN SERIDI OVERLAP — hero ile otorite bolumunun ek yerine BINER:
   panel yuksekliginin yarisi hero uzerinde, yarisi altinda kalir.
   Panel ~128px (masaustu); yarisi 4rem. Sayfa zemini koyu oldugu icin
   panelin cevresinde beyaz bosluk KALMAZ. */
.fr-trust-overlap {
  position: relative;
  z-index: 5;
  margin-top: -4rem;
}
@media (max-width: 639px) {
  /* Mobilde panel 2 satira sarar ve uzar; yari-yari yapmak hero
     butonlarini kapatir. Bu yuzden daha az bindirilir (buton acikta kalir). */
  .fr-trust-overlap { margin-top: -3.5rem; }
}

/* ================================================================ MEMNUNIYET (VIDEO)
   "Musterilerimizden Gelenler" — dikey video kartlari. Koyu zemin,
   sampanya vurgulari; tiklaninca video sesle oynar.
   ================================================================ */

.fr-testi {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Arka planda yumusak sampanya isilti — derinlik katar */
.fr-testi__glow {
  position: absolute;
  inset: auto 50% auto 50%;
  top: -10%;
  width: min(70rem, 120%);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  z-index: -1;
  background: radial-gradient(50% 60% at 50% 0%, rgba(155, 129, 108, .20) 0%, transparent 70%);
  pointer-events: none;
}

.fr-testi__grid {
  display: grid;
  gap: clamp(var(--fr-sp-4), 2.5vw, var(--fr-sp-6));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  max-width: 62rem;
  margin-inline: auto;
}
/* 3 video: genis ekranda tam 3 sutun ortali dursun */
@media (min-width: 900px) {
  .fr-testi__grid { grid-template-columns: repeat(3, 1fr); }
}

.fr-testi__card {
  margin: 0;
  position: relative;
}

/* Tiklanabilir dikey kart — poster + oynat dugmesi */
.fr-testi__play-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-xl);
  background: var(--fr-navy-800);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--fr-shadow-lg);
  transition: transform var(--fr-t-base), box-shadow var(--fr-t-base),
              border-color var(--fr-t-base);
}
.fr-testi__play-wrap:hover {
  transform: translateY(-4px);
  border-color: var(--fr-accent-soft);
  box-shadow: var(--fr-shadow-xl), 0 0 0 1px rgba(216, 195, 177, .25);
}

.fr-testi__poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--fr-t-slow), filter var(--fr-t-base);
}
.fr-testi__poster--ph {
  background:
    radial-gradient(70% 50% at 50% 25%, rgba(155,129,108,.35) 0%, transparent 70%),
    var(--fr-grad-dark);
}
.fr-testi__play-wrap:hover .fr-testi__poster { transform: scale(1.04); }

/* MAVI OVERLAY — poster uzerine marka lacivertinden bir perde.
   Ustte/altta koyu, ortada hafif; video yine secilir ama belirgin
   mavi bir ton kazanir (hero perdesiyle ayni dil). Hover'da acilir. */
.fr-testi__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(75% 55% at 50% 42%, rgba(8,18,44,.10) 0%, rgba(8,18,44,.42) 100%),
    linear-gradient(180deg,
      rgba(8,18,44,.55) 0%, rgba(13,24,57,.28) 32%,
      rgba(13,24,57,.30) 58%, rgba(8,18,44,.80) 100%);
  transition: opacity var(--fr-t-base);
}
.fr-testi__play-wrap:hover .fr-testi__veil { opacity: .78; }

/* Oynat dugmesi — sampanya daire, koyu ucgen */
.fr-testi__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 4.25rem; height: 4.25rem;
  border-radius: var(--fr-r-pill);
  background: var(--fr-grad-gold);
  color: var(--fr-navy-950);
  box-shadow: 0 10px 30px -8px rgba(8, 18, 44, .6);
  transition: transform var(--fr-t-base), box-shadow var(--fr-t-base);
}
.fr-testi__play::after {
  content: "";
  position: absolute;
  inset: -.5rem;
  border-radius: inherit;
  border: 1px solid rgba(216, 195, 177, .5);
  opacity: .6;
  transition: transform var(--fr-t-base), opacity var(--fr-t-base);
}
.fr-testi__play svg { width: 1.75rem; height: 1.75rem; margin-left: .15rem; }
.fr-testi__play-wrap:hover .fr-testi__play { transform: translate(-50%, -50%) scale(1.08); }
.fr-testi__play-wrap:hover .fr-testi__play::after { transform: scale(1.12); opacity: .3; }

/* Alt aciklama — "6 Ay Kullanan Afet Bey'in Deneyimi" gibi */
.fr-testi__caption {
  position: absolute;
  left: 1rem; right: 1rem; bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--fr-white);
}
.fr-testi__caption-mark {
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  flex: none;
  border-radius: var(--fr-r-sm);
  background: rgba(216, 195, 177, .16);
  border: 1px solid var(--fr-line-dark);
  color: var(--fr-accent-soft);
}
.fr-testi__caption-mark svg { width: .9375rem; height: .9375rem; }
.fr-testi__caption-text {
  font-size: var(--fr-fs-sm);
  font-weight: var(--fr-fw-semibold);
  line-height: 1.3;
  letter-spacing: .01em;
  text-shadow: 0 1px 8px rgba(8, 18, 44, .8);
}

/* Oynayan video — kartin tamamini kaplar */
.fr-testi__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
  border-radius: inherit;
  z-index: 2;
}

/* Alt bilgi seridi */
.fr-testi__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fr-sp-4) var(--fr-sp-6);
  margin-top: clamp(var(--fr-sp-6), 4vw, var(--fr-sp-8));
  text-align: center;
}
.fr-testi__note {
  display: inline-flex;
  align-items: center;
  gap: var(--fr-sp-2);
  margin: 0;
  font-size: var(--fr-fs-sm);
  color: var(--fr-text-soft);
}
.fr-testi__note svg { width: 1rem; height: 1rem; color: var(--fr-accent-soft); flex: none; }

/* ================================================================ ONEMLI BILGILENDIRME
   Siparis oncesi uygunluk/saglik uyarilari. Bilgilendirici ton:
   sicak sampanya vurgular, sakin kartlar.
   ================================================================ */

.fr-notice-grid {
  display: grid;
  gap: var(--fr-sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .fr-notice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fr-notice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.fr-notice-card {
  display: flex;
  flex-direction: column;
  gap: var(--fr-sp-3);
  height: 100%;
  padding: var(--fr-sp-5);
  background: var(--fr-bg-card);
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-lg);
  border-top: 2px solid var(--fr-accent-soft);
  transition: transform var(--fr-t-base), border-color var(--fr-t-base);
}
.fr-notice-card:hover {
  transform: translateY(-3px);
  border-color: var(--fr-accent-soft);
}

.fr-notice-card__icon {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  flex: none;
  border-radius: var(--fr-r-md);
  background: var(--fr-accent-faint);
  color: var(--fr-accent-soft);
}
.fr-notice-card__icon svg { width: 1.25rem; height: 1.25rem; }

.fr-notice-card__title {
  margin: 0 0 var(--fr-sp-2);
  font-size: var(--fr-fs-base);
  font-weight: var(--fr-fw-semibold);
  line-height: var(--fr-lh-snug);
  color: var(--fr-white);
}

.fr-notice-card__text {
  margin: 0;
  font-size: var(--fr-fs-sm);
  line-height: var(--fr-lh-loose);
  color: var(--fr-text-soft);
}

.fr-notice-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fr-sp-4) var(--fr-sp-6);
  margin-top: clamp(var(--fr-sp-6), 4vw, var(--fr-sp-8));
  text-align: center;
}
.fr-notice-cta__text {
  margin: 0;
  font-size: var(--fr-fs-base);
  color: var(--fr-text-soft);
}

/* ================================================================ KURULUS HIKAYESI + DEGERLER */

.fr-hikaye__grid {
  display: grid;
  gap: clamp(var(--fr-sp-6), 4vw, var(--fr-sp-9));
  align-items: start;
}
@media (min-width: 900px) {
  .fr-hikaye__grid { grid-template-columns: 1.25fr .85fr; }
}

.fr-hikaye__p {
  margin: 0 0 var(--fr-sp-4);
  font-size: var(--fr-fs-base);
  line-height: var(--fr-lh-loose);
  color: var(--fr-text-soft);
  max-width: 40rem;
}
.fr-hikaye__p--vurgu {
  margin-bottom: 0;
  padding-left: var(--fr-sp-5);
  border-left: 2px solid var(--fr-accent-soft);
  color: var(--fr-white);
  font-size: var(--fr-fs-lg);
  font-weight: var(--fr-fw-medium);
  line-height: var(--fr-lh-normal);
}

/* Degerler kutusu */
.fr-hikaye__degerler {
  padding: clamp(var(--fr-sp-5), 3vw, var(--fr-sp-7));
  background: linear-gradient(150deg, rgba(155,129,108,.14) 0%, rgba(13,24,57,.5) 100%);
  border: 1px solid var(--fr-line-dark);
  border-radius: var(--fr-r-2xl);
}

.fr-hikaye__degerler-baslik {
  margin: 0 0 var(--fr-sp-5);
  font-size: var(--fr-fs-lg);
  font-weight: var(--fr-fw-semibold);
  color: var(--fr-accent-soft);
}

.fr-deger-list { margin: 0; padding: 0; list-style: none; }
.fr-deger-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--fr-sp-3);
  font-size: var(--fr-fs-sm);
  line-height: var(--fr-lh-normal);
  color: var(--fr-white);
}
.fr-deger-list__item + .fr-deger-list__item {
  margin-top: var(--fr-sp-3);
  padding-top: var(--fr-sp-3);
  border-top: 1px solid var(--fr-line-dark);
}
.fr-deger-list__mark {
  display: grid;
  place-items: center;
  width: 1.375rem; height: 1.375rem;
  flex: none;
  margin-top: .0625rem;
  border-radius: var(--fr-r-pill);
  background: var(--fr-accent-faint);
  color: var(--fr-accent-soft);
}
.fr-deger-list__mark svg { width: .8125rem; height: .8125rem; }

/* ================================================================ MUSTERI YORUMLARI
   Yatay kaydirmali serit (3-4 kart gorunur) + tum yorumlar modali.
   ================================================================ */

.fr-yorumlar__ust {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fr-sp-4);
  margin-bottom: clamp(var(--fr-sp-5), 3vw, var(--fr-sp-7));
}
.fr-yorumlar__baslik { text-align: left; }
.fr-yorumlar__baslik .fr-title { margin-bottom: 0; }

.fr-yorumlar__tumu {
  flex: none;
  gap: var(--fr-sp-2);
}

/* --- kaydirmali serit --- */
.fr-yorum-slider { position: relative; }

.fr-yorum-slider__track {
  display: flex;
  gap: var(--fr-sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--fr-sp-3);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fr-yorum-slider__track::-webkit-scrollbar { display: none; }

/* Mobil 1, tablet 2, masaustu 3, genis 4 kart gorunur */
.fr-yorum-slider__item {
  flex: 0 0 min(85%, 22rem);
  scroll-snap-align: start;
}
@media (min-width: 640px)  { .fr-yorum-slider__item { flex-basis: calc((100% - 1rem) / 2); } }
@media (min-width: 1024px) { .fr-yorum-slider__item { flex-basis: calc((100% - 2rem) / 3); } }
@media (min-width: 1360px) { .fr-yorum-slider__item { flex-basis: calc((100% - 3rem) / 4); } }

.fr-yorum-slider__nav {
  display: flex;
  justify-content: center;
  gap: var(--fr-sp-3);
  margin-top: var(--fr-sp-5);
}

/* --- yorum karti --- */
.fr-yorum {
  display: flex;
  flex-direction: column;
  gap: var(--fr-sp-3);
  height: 100%;
  padding: var(--fr-sp-5);
  background: var(--fr-bg-card);
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-lg);
  transition: transform var(--fr-t-base), border-color var(--fr-t-base);
}
.fr-yorum:hover {
  transform: translateY(-3px);
  border-color: var(--fr-accent-soft);
}

.fr-yorum__ust { display: flex; align-items: center; gap: var(--fr-sp-3); }

.fr-yorum__avatar {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  flex: none;
  border-radius: var(--fr-r-pill);
  background: var(--fr-grad-gold);
  color: var(--fr-navy-950);
  font-size: var(--fr-fs-base);
  font-weight: var(--fr-fw-bold);
  text-transform: uppercase;
}

.fr-yorum__kim { min-width: 0; }

.fr-yorum__ad {
  margin: 0;
  font-size: var(--fr-fs-sm);
  font-weight: var(--fr-fw-semibold);
  color: var(--fr-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fr-yorum__meta {
  display: flex;
  align-items: center;
  gap: .3125rem;
  margin: .125rem 0 0;
  font-size: var(--fr-fs-xs);
  color: var(--fr-accent-soft);
}
.fr-yorum__ig { display: inline-grid; place-items: center; }
.fr-yorum__ig svg { width: .875rem; height: .875rem; }

.fr-yorum__yildiz { display: flex; gap: .0625rem; color: var(--fr-accent-soft); }
.fr-yorum__yildiz svg { width: .875rem; height: .875rem; }

.fr-yorum__metin {
  margin: 0;
  font-size: var(--fr-fs-sm);
  line-height: var(--fr-lh-loose);
  color: var(--fr-text-soft);
}

/* ================================================================ MODAL */

.fr-modal {
  position: fixed;
  inset: 0;
  z-index: var(--fr-z-modal);
  display: grid;
  place-items: center;
  padding: clamp(.75rem, 3vw, 2rem);
  opacity: 0;
  visibility: hidden;
  /* visibility GECISLI DEGIL: acilista aninda gorunur olur.
     Kapanista ise solma bitene kadar geciktirilir (0s linear gecikme).
     Boylece modal, animasyon calismayan ortamlarda bile acilir. */
  transition: opacity var(--fr-t-base), visibility 0s linear var(--fr-t-base);
}
.fr-modal[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--fr-t-base), visibility 0s linear 0s;
}

.fr-modal__perde {
  position: absolute;
  inset: 0;
  background: rgba(4, 9, 24, .82);
  backdrop-filter: blur(6px);
}

.fr-modal__kutu {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(72rem, 100%);
  max-height: min(88vh, 60rem);
  background: var(--fr-navy-950);
  border: 1px solid var(--fr-line-dark);
  border-radius: var(--fr-r-2xl);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
  overflow: hidden;
  transform: translateY(12px) scale(.985);
  transition: transform var(--fr-t-slow);
}
.fr-modal[data-open="true"] .fr-modal__kutu { transform: none; }

.fr-modal__ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fr-sp-4);
  padding: clamp(var(--fr-sp-5), 3vw, var(--fr-sp-6));
  border-bottom: 1px solid var(--fr-line-dark);
  background: linear-gradient(180deg, rgba(155,129,108,.12) 0%, transparent 100%);
}

.fr-modal__baslik {
  margin: 0;
  font-size: var(--fr-fs-xl);
  font-weight: var(--fr-fw-semibold);
  line-height: var(--fr-lh-snug);
  color: var(--fr-white);
}

.fr-modal__kapat {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  flex: none;
  border: 1px solid var(--fr-line-dark);
  border-radius: var(--fr-r-pill);
  background: transparent;
  color: var(--fr-white);
  transition: background var(--fr-t-fast), border-color var(--fr-t-fast);
}
.fr-modal__kapat:hover {
  background: rgba(255, 255, 255, .1);
  border-color: var(--fr-accent-soft);
}
.fr-modal__kapat svg { width: 1.125rem; height: 1.125rem; }

.fr-modal__govde {
  flex: 1;
  overflow-y: auto;
  padding: clamp(var(--fr-sp-5), 3vw, var(--fr-sp-6));
  scrollbar-width: thin;
}

.fr-modal__grid {
  display: grid;
  gap: var(--fr-sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .fr-modal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fr-modal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.fr-modal__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fr-sp-3) var(--fr-sp-5);
  padding: var(--fr-sp-4) clamp(var(--fr-sp-5), 3vw, var(--fr-sp-6));
  border-top: 1px solid var(--fr-line-dark);
  background: var(--fr-navy-900);
}
.fr-modal__not {
  display: inline-flex;
  align-items: center;
  gap: var(--fr-sp-2);
  margin: 0;
  font-size: var(--fr-fs-xs);
  color: var(--fr-text-soft);
}
.fr-modal__not svg { width: 1rem; height: 1rem; color: var(--fr-accent-soft); flex: none; }

/* Modal acikken sayfa kaymasin */
body.fr-modal-acik { overflow: hidden; }

/* ================================================================ YARDIM MERKEZI
   Bilgilendirme videolari: dikey kartlar, uzerinde baslik/aciklama yazisi.
   ================================================================ */

.fr-pagehead__lede {
  max-width: 44rem;
  margin: var(--fr-sp-4) auto 0;
  font-size: var(--fr-fs-base);
  line-height: var(--fr-lh-loose);
  color: var(--fr-text-on-dark-soft);
}

.fr-yardim-grid {
  display: grid;
  gap: clamp(var(--fr-sp-4), 2.5vw, var(--fr-sp-6));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  max-width: 74rem;
  margin-inline: auto;
}
@media (min-width: 900px)  { .fr-yardim-grid { grid-template-columns: repeat(3, 1fr); } }

.fr-yardim-kart { margin: 0; position: relative; }

/* Video yuzu — testi kartiyla ayni temel, farkli oran (dikey) */
.fr-yardim-kart__yuz { aspect-ratio: 9 / 16; }

/* --- video ustundeki yazi katmani --- */

.fr-yardim-kart__ust {
  position: absolute;
  top: 1rem; left: 1rem; right: 1rem;
  display: flex;
  z-index: 1;
}

.fr-yardim-kart__etiket {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border-radius: var(--fr-r-pill);
  background: rgba(8, 18, 44, .62);
  border: 1px solid var(--fr-line-dark);
  backdrop-filter: blur(6px);
  color: var(--fr-accent-soft);
  font-size: .6875rem;
  font-weight: var(--fr-fw-semibold);
  letter-spacing: .1em;
}
.fr-yardim-kart__etiket svg { width: .875rem; height: .875rem; flex: none; }

.fr-yardim-kart__alt {
  position: absolute;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .375rem;
  text-align: left;
}

.fr-yardim-kart__baslik {
  font-size: var(--fr-fs-lg);
  font-weight: var(--fr-fw-semibold);
  line-height: var(--fr-lh-snug);
  color: var(--fr-white);
  text-shadow: 0 2px 12px rgba(8, 18, 44, .9);
}

.fr-yardim-kart__aciklama {
  font-size: var(--fr-fs-xs);
  line-height: 1.5;
  color: var(--fr-sand-300);
  text-shadow: 0 1px 10px rgba(8, 18, 44, .9);
}

/* Yazilarin okunmasi icin alt karartma biraz daha guclu */
.fr-yardim-kart__yuz .fr-testi__veil {
  background:
    radial-gradient(70% 45% at 50% 40%, rgba(8,18,44,.06) 0%, rgba(8,18,44,.35) 100%),
    linear-gradient(180deg,
      rgba(8,18,44,.70) 0%, rgba(13,24,57,.20) 28%,
      rgba(13,24,57,.42) 62%, rgba(8,18,44,.92) 100%);
}

/* Video oynarken ustteki yazilar kaybolur */
.fr-yardim-kart__yuz[data-acildi="1"] .fr-yardim-kart__ust,
.fr-yardim-kart__yuz[data-acildi="1"] .fr-yardim-kart__alt,
.fr-yardim-kart__yuz[data-acildi="1"] .fr-testi__veil { display: none; }

/* --- ana sayfadaki Yardim Merkezi cagrisi --- */
.fr-sss-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fr-sp-4) var(--fr-sp-6);
  margin-top: clamp(var(--fr-sp-6), 4vw, var(--fr-sp-8));
  padding: clamp(var(--fr-sp-5), 3vw, var(--fr-sp-6));
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-xl);
  background: linear-gradient(135deg, rgba(155,129,108,.12) 0%, rgba(13,24,57,.4) 100%);
  text-align: center;
}
.fr-sss-cta__metin { margin: 0; }
.fr-sss-cta__baslik {
  margin: 0 0 .25rem;
  font-size: var(--fr-fs-lg);
  font-weight: var(--fr-fw-semibold);
  color: var(--fr-white);
}
.fr-sss-cta__alt {
  margin: 0;
  font-size: var(--fr-fs-sm);
  color: var(--fr-text-soft);
}

/* ================================================================ ONCE / SONRA
   Musteri sonuc gorselleri. Her kart iki fotografi TEK bir cerceve
   icinde, ortada altin bir ayiricla birlestirir (split-frame gorunumu).
   ================================================================ */

.fr-oncesonra { position: relative; overflow: hidden; }

.fr-oncesonra__glow {
  position: absolute;
  top: -12%; left: 50%;
  width: min(64rem, 130%);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  z-index: 0;
  background: radial-gradient(50% 60% at 50% 0%, rgba(155,129,108,.12) 0%, transparent 70%);
  pointer-events: none;
}
.fr-oncesonra > .fr-container { position: relative; z-index: 1; }

.fr-os-grid {
  display: grid;
  align-items: start;   /* bir kartin uzun olmasi digerini esnetmesin */
  gap: clamp(var(--fr-sp-6), 4vw, var(--fr-sp-8));
  grid-template-columns: 1fr;
  max-width: 46rem;   /* tek kart bile olsa dengeli ve ortali dursun */
  margin-inline: auto;
}
@media (min-width: 900px) {
  .fr-os-grid[data-cok] { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fr-os-card {
  border-radius: var(--fr-r-2xl);
  padding: 3px;   /* ince altin cerceve kalinligi */
  background: var(--fr-grad-gold);
  box-shadow: var(--fr-shadow-xl);
}

.fr-os-card__frame {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: calc(var(--fr-r-2xl) - 3px);
  overflow: hidden;
  background: var(--fr-navy-950);
}

.fr-os-card__pane {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.fr-os-card__pane img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--fr-t-slow);
}
.fr-os-card:hover .fr-os-card__pane img { transform: scale(1.05); }

/* Once karesi hafif desatüre — kontrastı sonra'ya birakir */
.fr-os-card__pane--once img { filter: grayscale(.25) brightness(.92); }

.fr-os-card__tag {
  position: absolute;
  top: .75rem;
  margin: 0;
  padding: .3125rem .875rem;
  border-radius: var(--fr-r-pill);
  font-size: .6875rem;
  font-weight: var(--fr-fw-bold);
  letter-spacing: .12em;
  backdrop-filter: blur(4px);
}
.fr-os-card__tag--once {
  left: .75rem;
  background: rgba(8, 18, 44, .55);
  color: var(--fr-white);
  border: 1px solid rgba(255,255,255,.18);
}
.fr-os-card__tag--sonra {
  right: .75rem;
  background: var(--fr-grad-gold);
  color: var(--fr-navy-950);
}

/* Ortadaki altin ayirici — iki kareyi birbirine baglayan ince serit */
.fr-os-card__divider {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2.5rem;
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.fr-os-card__divider::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(8,18,44,.35) 45%, rgba(8,18,44,.35) 55%, transparent 100%);
}
.fr-os-card__divider-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--fr-r-pill);
  background: var(--fr-grad-gold);
  color: var(--fr-navy-950);
  box-shadow: 0 6px 18px -4px rgba(0,0,0,.5);
}
.fr-os-card__divider-mark svg { width: 1.125rem; height: 1.125rem; }

/* Tek gorsel varyanti — kendi icinde once/sonra barindiran tek fotograf
   (split cerceve yok, kirpma yok, kendi olcusunde gosterilir). */
.fr-os-card--tek .fr-os-card__frame { grid-template-columns: 1fr; }
.fr-os-card--tek .fr-os-card__pane {
  /* Cift kartta iki adet 3:4 panel yan yana durur (toplamda ~3:2).
     Tek kart da AYNI orani kullanir ki grid'de komsu kartla ayni
     yukseklikte kalsin — dikey veya yatay gorsel farki dengesizlik
     yaratmasin. Gorsel kirpilmaz, sadece bu cerceveye sigdirilir. */
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
}
.fr-os-card--tek .fr-os-card__pane img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ================================================================ ONE CIKAN SERIT */

.fr-strip {
  background: var(--fr-grad-sand);
  color: var(--fr-navy-900);
}

.fr-strip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fr-sp-4) clamp(var(--fr-sp-5), 4vw, var(--fr-sp-9));
  padding-block: var(--fr-sp-5);
  text-align: center;
}

.fr-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--fr-sp-2);
  font-size: var(--fr-fs-sm);
  font-weight: var(--fr-fw-semibold);
}
.fr-strip__item svg {
  width: 1.125rem; height: 1.125rem;
  color: var(--fr-accent-deep);
  flex: none;
}

/* ================================================================ OTORITE + CAGRI
   Hero'dan sonra gelen bolum. Ust: gorsel + metin; alt: ustteki
   bloga BINEN kumlu cagri karti. Koyu lacivert zemin uzerinde.
   ================================================================ */

.fr-authority { overflow: hidden; }   /* binen kartin golgesi tasmasin */

/* Bu bolumde saga/sola DAHA FAZLA bosluk — icerik kenarlardan uzak dursun.
   Ust bloktaki panelin de bindigi ust padding'i biraz artiririz. */
.fr-authority .fr-container {
  max-width: 1200px;
  padding-inline: clamp(1.5rem, 6vw, 5.5rem);
}
/* Bolumu, guven panelinin hero altinda kalan yarisi (4rem) kadar YUKARI
   ceker; boylece bolumun kendi koyu zemini (navy-900) o boslugu doldurur
   ve panelin kenarlarinda daha koyu (navy-950) bir serit KALMAZ.
   Panelin ust yarisi yine hero videosu uzerinde durur — video kapanmaz. */
.fr-authority {
  margin-top: -4rem;
  padding-top: calc(4rem + clamp(2rem, 2rem + 3vw, 4.5rem));
}

/* --- ust blok: gorsel + metin ---
   Sutun boslugu DAR tutulur: gorsel ile metin birbirine yakin dursun. */
.fr-authority__top {
  display: grid;
  gap: clamp(var(--fr-sp-4), 2.5vw, var(--fr-sp-6));
  align-items: center;
  padding-bottom: clamp(2.5rem, 5vw, 5.5rem);   /* karta yer ac */
}
@media (min-width: 900px) {
  .fr-authority__top { grid-template-columns: 1fr 1fr; }
}

.fr-authority__media {
  border-radius: var(--fr-r-2xl);
  overflow: hidden;
  box-shadow: var(--fr-shadow-xl);
  background: var(--fr-grad-sand);
}
.fr-authority__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;   /* daha az yukseklik (once 4:5 idi) */
  object-fit: cover;
}

/* Gercek urun fotografi — orani korunur, KIRPILMAZ.
   Cok az kucultulur, kose yuvarlanir ve ASAGI kaydirilarak alttaki
   kumlu (sari) kartin ALTINA girer (kart z-index:2 ile ustte kalir). */
.fr-authority__media--foto {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
/* Asagi kaydirma SADECE masaustunde (iki sutun + kart bindirmesi olan yer).
   Mobilde gorsel metnin ustunde tek sutun oldugundan kaydirma yapilmaz. */
@media (min-width: 900px) {
  .fr-authority__media--foto {
    transform: translateY(clamp(1rem, 3vw, 2.5rem));
  }
}
.fr-authority__media--foto img {
  display: block;
  width: 92%;                 /* cok az kucult — oran korunur */
  height: auto;
  aspect-ratio: 839 / 936;    /* gercek oran: kirpma/bozulma yok */
  object-fit: contain;
  margin-inline: auto;
  border-radius: var(--fr-r-lg);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .6);
}

/* Gorsel yer tutucu — isaret ortada, aciklama satiri ALTTA */
.fr-authority__ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: var(--fr-sp-6);
  text-align: center;
  background:
    radial-gradient(80% 60% at 50% 20%, rgba(155,129,108,.25) 0%, transparent 70%),
    var(--fr-grad-dark);
  color: var(--fr-text-on-dark-soft);
}
.fr-authority__ph-mark { width: 3.5rem; height: 3.5rem; }
.fr-authority__ph-mark svg { width: 100%; height: 100%; }
/* Aciklama satiri kutunun en altina yaslanir */
.fr-authority__ph-text {
  position: absolute;
  left: var(--fr-sp-5);
  right: var(--fr-sp-5);
  bottom: var(--fr-sp-5);
  font-size: var(--fr-fs-sm);
  line-height: 1.5;
}
.fr-authority__ph-text small { opacity: .7; font-size: var(--fr-fs-xs); }

/* --- sag metin: masaustunde SAGA YASLI, mobilde ortali --- */
.fr-authority__body { text-align: center; }
.fr-authority__body .fr-eyebrow { justify-content: center; }
@media (min-width: 900px) {
  .fr-authority__body { text-align: right; }
  .fr-authority__body .fr-eyebrow { justify-content: flex-end; }
  .fr-authority__chips { justify-content: flex-end; }
  .fr-authority__text { margin-inline-start: auto; margin-inline-end: 0; }
}

/* Baslik — referans birebir: 32px / 600 / #D1BEB7 / 1.5 / 1.6px */
.fr-authority__title {
  margin: 0 0 var(--fr-sp-4);
  font-size: 2rem;                    /* 32px */
  font-weight: var(--fr-fw-semibold); /* 600 */
  line-height: 1.5;                   /* 48px */
  letter-spacing: 1.6px;
  color: var(--fr-blush-400);         /* #D1BEB7 */
}

/* Paragraf — referans birebir: 16px / 400 / beyaz / 1.5 */
.fr-authority__text {
  margin: 0 auto var(--fr-sp-6);
  font-size: var(--fr-fs-base);       /* 16px */
  font-weight: var(--fr-fw-regular);  /* 400 */
  line-height: 1.5;                   /* 24px */
  color: var(--fr-white);
  max-width: 34rem;
}

/* Etiket ("Öne Çıkan Özellikler") — referans "Basında Biz": 18px / 600 / #D1BEB7 */
.fr-authority__label {
  margin: 0 0 var(--fr-sp-3);
  font-size: 1.125rem;                /* 18px */
  font-weight: var(--fr-fw-semibold); /* 600 */
  line-height: 1.55;
  color: var(--fr-blush-400);         /* #D1BEB7 */
}

.fr-authority__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fr-sp-2) var(--fr-sp-3);
  margin: 0; padding: 0;
  list-style: none;
}
.fr-authority__chips li { margin: 0; }
.fr-authority__chip {
  display: inline-flex;
  align-items: center;
  padding: .4375rem .875rem;
  border: 1px solid var(--fr-line-dark);
  border-radius: var(--fr-r-pill);
  background: rgba(216, 195, 177, .08);
  color: var(--fr-text-on-dark);
  font-size: var(--fr-fs-xs);
  font-weight: var(--fr-fw-medium);
  letter-spacing: .01em;
}

/* --- binen kumlu cagri karti --- */
.fr-authority__cta {
  position: relative;
  z-index: 2;
  margin-top: clamp(-4.5rem, -5vw, -2rem);   /* ustteki bloga bin */
  /* Dikey padding yataydan daha DAR — kart yuksekligi azaldi. */
  padding: clamp(var(--fr-sp-5), 3.5vw, var(--fr-sp-7)) clamp(var(--fr-sp-6), 5vw, var(--fr-sp-9));
  border-radius: var(--fr-r-2xl);
  background: var(--fr-grad-card);
  box-shadow: var(--fr-shadow-xl);
  text-align: center;
  color: var(--fr-navy-900);
}

.fr-authority__cta-logo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--fr-sp-4);
}

/* Kumlu kartta logo KOYU olmali (beyaz yazi gorunmez).
   Marka isaretinin ve iki kelimenin rengini burada koyuya ceviririz. */
.fr-authority__cta-logo .fr-brand,
.fr-authority__cta-logo .fr-brand__name > span:first-child {
  color: var(--fr-navy-900);
}
.fr-authority__cta-logo .fr-brand__mark path { stroke: var(--fr-navy-900); }
.fr-authority__cta-logo .fr-brand__accent {
  background: none;
  color: var(--fr-navy-900);
  -webkit-text-fill-color: var(--fr-navy-900);
}
.fr-authority__cta-logo .fr-brand__tag { color: rgba(27, 36, 68, .68); }

.fr-authority__cta-title {
  margin: 0 auto var(--fr-sp-4);
  max-width: 22rem;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 1.875rem);   /* ~27px */
  font-weight: var(--fr-fw-bold);
  line-height: var(--fr-lh-tight);
  letter-spacing: var(--fr-ls-tight);
  color: var(--fr-navy-900);
}

.fr-authority__cta-text {
  margin: 0 auto var(--fr-sp-5);
  max-width: 36rem;
  font-size: var(--fr-fs-base);
  line-height: var(--fr-lh-normal);
  color: rgba(27, 36, 68, .82);
}

/* ================================================================ OTORITE / ANLATI */

/* Koyu zeminde bronz cerceveli one cikan blok */
.fr-feature {
  position: relative;
  padding: clamp(var(--fr-sp-6), 4vw, var(--fr-sp-9));
  border-radius: var(--fr-r-2xl);
  background: linear-gradient(135deg, rgba(155, 129, 108, .18) 0%, rgba(13, 24, 57, .6) 100%);
  border: 1px solid rgba(216, 195, 177, .22);
  text-align: center;
}

.fr-feature__title {
  margin: 0 0 var(--fr-sp-4);
  font-size: var(--fr-fs-2xl);
  font-weight: var(--fr-fw-semibold);
  line-height: var(--fr-lh-snug);
  letter-spacing: var(--fr-ls-tight);
}

.fr-feature__text {
  margin: 0 auto var(--fr-sp-6);
  max-width: 46rem;
  color: var(--fr-text-on-dark-soft);
  line-height: var(--fr-lh-loose);
}

/* ================================================================ SUREC / ADIMLAR */

.fr-steps { counter-reset: fr-step; }

.fr-steps__grid {
  display: grid;
  gap: var(--fr-sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* Yatay zaman cizgisi — masaustunde adimlari cizgiyle baglar */
.fr-timeline {
  position: relative;
  display: grid;
  gap: var(--fr-sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

@media (min-width: 960px) {
  .fr-timeline::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%, var(--fr-accent-soft) 12%,
      var(--fr-accent-soft) 88%, transparent 100%);
    opacity: .5;
  }
}

.fr-timeline__item { position: relative; text-align: center; }

.fr-timeline__dot {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  margin: 0 auto var(--fr-sp-4);
  border-radius: var(--fr-r-pill);
  /* OPAK zemin + zemin renginde halka: baglanti cizgisi dairenin
     arkasindan gecmez, dairede kesilir. Yari saydam zeminde cizgi
     rakamin ustune biniyor ve rakam okunmuyordu. */
  background: var(--fr-navy-900);
  box-shadow: 0 0 0 .375rem var(--fr-bg);
  border: 1px solid var(--fr-accent-soft);
  color: var(--fr-accent);
  font-size: var(--fr-fs-sm);
  font-weight: var(--fr-fw-bold);
  position: relative;
  z-index: 1;
}

.fr-timeline__title {
  margin: 0 0 var(--fr-sp-2);
  font-size: var(--fr-fs-base);
  font-weight: var(--fr-fw-semibold);
  line-height: var(--fr-lh-snug);
}

.fr-timeline__text {
  margin: 0;
  font-size: var(--fr-fs-xs);
  line-height: var(--fr-lh-normal);
  color: var(--fr-text-soft);
}

/* Koyu zeminde zaman cizgisi */
.fr-section--dark .fr-timeline__dot,
.fr-section--grad .fr-timeline__dot {
  /* Gradyan zeminde sabit renkli halka tutmaz — burada yalnizca
     opak daire zemini cizgiyi keser. */
  background: var(--fr-navy-950);
  box-shadow: none;
  border-color: var(--fr-accent-soft);
  color: var(--fr-accent);
}
.fr-section--dark .fr-timeline__text,
.fr-section--grad .fr-timeline__text { color: var(--fr-text-on-dark-soft); }

/* ================================================================ URUN */

.fr-product {
  display: grid;
  gap: clamp(var(--fr-sp-6), 4vw, var(--fr-sp-9));
  align-items: center;
}
@media (min-width: 960px) {
  .fr-product { grid-template-columns: .9fr 1.1fr; }
  /* Alt alta gelen urun bloklari zigzag gorunsun diye gorseli saga alir */
  .fr-product--ters .fr-product__media { order: 2; }
}

.fr-product__media {
  position: relative;
  border-radius: var(--fr-r-2xl);
  overflow: hidden;
  background: var(--fr-grad-sand);
  box-shadow: var(--fr-shadow-xl);
}

/* Icerik listesi — etken maddeler.
   6 madde: mobilde 1, orta ekranda 2, genis ekranda 3 sutun.
   Boylece satirlar hep TAM dolar (yalniz/kisa kart kalmaz). */
/* Bolum arka planinda yumusak sampanya isilti — sadece dekoratif */
.fr-icerik-sec { position: relative; overflow: hidden; }
.fr-icerik-sec__glow {
  position: absolute;
  top: -15%; left: 50%;
  width: min(60rem, 140%);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  z-index: 0;
  background: radial-gradient(50% 60% at 50% 0%, rgba(155,129,108,.10) 0%, transparent 70%);
  pointer-events: none;
}
.fr-icerik-sec > .fr-container { position: relative; z-index: 1; }

.fr-inci {
  display: grid;
  gap: var(--fr-sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .fr-inci { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .fr-inci { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Grid ogesi (li) satir yuksekligine uzar; kart da li'yi doldurur ki
   AYNI SATIRDAKI TUM KARTLAR ESIT YUKSEKLIKTE olsun. */
.fr-inci li { margin: 0; display: grid; }

.fr-inci__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--fr-sp-4);
  height: 100%;
  padding: var(--fr-sp-4);
  background: var(--fr-bg-card);
  border: 1px solid var(--fr-line);
  border-top: 2px solid var(--fr-accent-soft);
  border-radius: var(--fr-r-md);
  overflow: hidden;
  transition: transform var(--fr-t-base), border-color var(--fr-t-base),
              box-shadow var(--fr-t-base);
}
.fr-inci__item:hover {
  transform: translateY(-3px);
  border-color: var(--fr-accent-soft);
  box-shadow: var(--fr-shadow-lg);
}

/* Kartin arka kosesinde yumusak sampanya isilti — dekoratif */
.fr-inci__item::after {
  content: "";
  position: absolute;
  top: -40%; right: -30%;
  width: 8rem; height: 8rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216,195,177,.16) 0%, transparent 70%);
  pointer-events: none;
}

/* Ikon kutusu — madde gorseli. Sampanya gradyanli, hafif yukselti. */
.fr-inci__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: var(--fr-r-md);
  background: linear-gradient(150deg, rgba(216,195,177,.22) 0%, rgba(155,129,108,.12) 100%);
  border: 1px solid var(--fr-line-dark);
  color: var(--fr-accent-soft);
  flex: none;
}
.fr-inci__mark svg { width: 1.5rem; height: 1.5rem; }

/* Sira numarasi — ikon kutusunun sag-ust kosesine binen kucuk rozet */
.fr-inci__num {
  position: absolute;
  top: -.5rem; right: -.5rem;
  display: grid;
  place-items: center;
  min-width: 1.25rem; height: 1.25rem;
  padding-inline: .25rem;
  border-radius: var(--fr-r-pill);
  background: var(--fr-navy-950);
  border: 1px solid var(--fr-line-dark);
  color: var(--fr-accent-soft);
  font-size: .5625rem;
  font-weight: var(--fr-fw-bold);
  letter-spacing: .02em;
}

.fr-inci__name {
  position: relative;
  margin: 0;
  font-size: var(--fr-fs-sm);
  font-weight: var(--fr-fw-semibold);
  line-height: 1.35;
  color: var(--fr-white);
}

.fr-inci__role {
  position: relative;
  margin: .125rem 0 0;
  font-size: var(--fr-fs-xs);
  color: var(--fr-text-soft);
  line-height: 1.4;
}

/* Kunye tablosu (barkod, hacim vb.) */
.fr-spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fr-fs-sm);
}
.fr-spec th, .fr-spec td {
  padding: var(--fr-sp-3) 0;
  text-align: left;
  border-bottom: 1px solid var(--fr-line);
  vertical-align: top;
}
.fr-spec th {
  width: 42%;
  font-weight: var(--fr-fw-medium);
  color: var(--fr-text-soft);
}
.fr-spec td { font-weight: var(--fr-fw-semibold); }
.fr-spec tr:last-child th,
.fr-spec tr:last-child td { border-bottom: 0; }

/* ================================================================ ISTATISTIK BANDI */

.fr-stats-band {
  display: grid;
  gap: var(--fr-sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}

/* ================================================================ PERFORMANS CUBUKLARI */

.fr-bars { display: grid; gap: var(--fr-sp-5); }

.fr-bar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fr-sp-4);
  margin-bottom: var(--fr-sp-2);
}

.fr-bar__name {
  font-size: var(--fr-fs-sm);
  font-weight: var(--fr-fw-medium);
  color: var(--fr-text-on-dark);
}

.fr-bar__value {
  font-size: var(--fr-fs-sm);
  font-weight: var(--fr-fw-bold);
  color: var(--fr-accent-soft);
}

.fr-bar__track {
  height: .5rem;
  border-radius: var(--fr-r-pill);
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.fr-bar__fill {
  height: 100%;
  width: var(--fr-bar, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--fr-bronze-500), var(--fr-sand-400));
  transform-origin: left center;
  animation: fr-bar-in 1.1s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes fr-bar-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .fr-bar__fill { animation: none; }
}

/* Urun gorseli — zarif sise vinyeti (fotograf gelene kadar) */
.fr-bottle-scene {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(90% 70% at 50% 108%, rgba(155, 129, 108, .5) 0%, transparent 60%),
    var(--fr-grad-dark);
}

.fr-bottle-scene svg {
  width: min(46%, 15rem);
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(8, 18, 44, .55));
}

.fr-bottle-scene__img {
  position: relative;
  width: min(80%, 24rem);
  height: auto;
  object-fit: contain;
  border-radius: var(--fr-r-xl);
  filter: drop-shadow(0 30px 40px rgba(8, 18, 44, .55));
}

.fr-bottle-scene__ring {
  position: absolute;
  width: 68%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(216, 195, 177, .25);
}
.fr-bottle-scene__ring--2 { width: 88%; opacity: .5; }

/* ================================================================ SSS */

.fr-faq { max-width: 52rem; margin-inline: auto; }

/* ================================================================ CAGRI BLOGU */

.fr-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(var(--fr-sp-7), 5vw, var(--fr-sp-10));
  border-radius: var(--fr-r-2xl);
  background: var(--fr-grad-dark);
  color: var(--fr-text-on-dark);
  text-align: center;
  isolation: isolate;
}

.fr-cta::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 26rem; height: 26rem;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155, 129, 108, .28) 0%, transparent 70%);
}

.fr-cta__title {
  margin: 0 auto var(--fr-sp-4);
  max-width: 34rem;
  font-size: var(--fr-fs-2xl);
  font-weight: var(--fr-fw-semibold);
  line-height: var(--fr-lh-snug);
  letter-spacing: var(--fr-ls-tight);
}

.fr-cta__text {
  margin: 0 auto var(--fr-sp-6);
  max-width: 38rem;
  color: var(--fr-text-on-dark-soft);
  line-height: var(--fr-lh-loose);
}

/* ================================================================ ALT BILGI */

.fr-footer {
  background: var(--fr-navy-950);
  color: var(--fr-text-on-dark-soft);
  font-size: var(--fr-fs-sm);
}

.fr-footer__main {
  display: grid;
  gap: var(--fr-sp-7);
  padding-block: clamp(var(--fr-sp-8), 5vw, var(--fr-sp-10));
}
@media (min-width: 720px) {
  .fr-footer__main { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (min-width: 1024px) {
  .fr-footer__main { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
}

.fr-footer__title {
  margin: 0 0 var(--fr-sp-4);
  font-size: var(--fr-fs-xs);
  font-weight: var(--fr-fw-semibold);
  letter-spacing: var(--fr-ls-caps);
  text-transform: uppercase;
  color: var(--fr-white);
}

.fr-footer__list { margin: 0; padding: 0; list-style: none; }
.fr-footer__list li { margin: 0; }
.fr-footer__list li + li { margin-top: var(--fr-sp-3); }
.fr-footer__list a {
  color: inherit;
  text-decoration: none;
  transition: color var(--fr-t-fast);
}
.fr-footer__list a:hover { color: var(--fr-white); }

.fr-footer__about {
  max-width: 26rem;
  line-height: var(--fr-lh-loose);
}

.fr-footer__contact { display: grid; gap: var(--fr-sp-3); }

.fr-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--fr-sp-3);
  color: inherit;
  text-decoration: none;
  line-height: var(--fr-lh-normal);
}
.fr-footer__contact-item:hover { color: var(--fr-white); }
.fr-footer__contact-item svg {
  width: 1rem; height: 1rem;
  margin-top: .3125rem;
  color: var(--fr-accent-soft);
  flex: none;
}

.fr-footer__social {
  display: flex;
  gap: var(--fr-sp-3);
  margin-top: var(--fr-sp-5);
}

.fr-footer__social a {
  display: grid;
  place-items: center;
  width: 2.375rem; height: 2.375rem;
  border: 1px solid var(--fr-line-dark);
  border-radius: var(--fr-r-sm);
  color: var(--fr-text-on-dark-soft);
  transition: background var(--fr-t-fast), color var(--fr-t-fast),
              border-color var(--fr-t-fast);
}
.fr-footer__social a:hover {
  background: var(--fr-accent);
  border-color: var(--fr-accent);
  color: var(--fr-white);
}
.fr-footer__social svg { width: 1.125rem; height: 1.125rem; }

.fr-footer__bottom {
  border-top: 1px solid var(--fr-line-dark);
  padding-block: var(--fr-sp-5);
}

.fr-footer__bottom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fr-sp-3) var(--fr-sp-5);
  font-size: var(--fr-fs-xs);
}

.fr-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fr-sp-2) var(--fr-sp-4);
  margin: 0; padding: 0;
  list-style: none;
}
.fr-footer__legal li { margin: 0; }
.fr-footer__legal a { color: inherit; text-decoration: none; }
.fr-footer__legal a:hover { color: var(--fr-white); }

/* Yasal uyari — kozmetik urun beyani */
.fr-footer__disclaimer {
  padding: var(--fr-sp-4) 0 0;
  font-size: .6875rem;
  line-height: 1.55;
  color: var(--fr-navy-500);
  max-width: 60rem;
}

/* ================================================================ GELISTIRME ORTAGI SERIDI
   Footer'in DISINDA, en altta, ince ve sag yasli bir kredi seridi. */
.fr-credit__row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fr-sp-3);
}

.fr-credit__text {
  font-size: var(--fr-fs-xs);
  color: var(--fr-text-soft);
}

.fr-credit__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fr-sp-2);
  padding: .4375rem .875rem;
  border: 1px solid var(--fr-line-dark);
  border-radius: var(--fr-r-pill);
  color: var(--fr-accent-soft);
  font-size: var(--fr-fs-xs);
  font-weight: var(--fr-fw-bold);
  letter-spacing: .04em;
}
.fr-credit__badge svg { width: .875rem; height: .875rem; }

/* ================================================================ DIGER URUNLERIMIZ (kart grid) */

.fr-urun-grid {
  display: grid;
  gap: clamp(var(--fr-sp-6), 4vw, var(--fr-sp-8));
  grid-template-columns: 1fr;
  max-width: 64rem;
  margin-inline: auto;
}
@media (min-width: 860px) {
  .fr-urun-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Tek kart kaldiginda ortali ve dar dursun (kampanya karti gibi) */
.fr-urun-grid--tekli { max-width: 32rem; grid-template-columns: 1fr !important; }

.fr-urun-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--fr-bg-card);
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-xl);
  overflow: hidden;
  box-shadow: var(--fr-shadow-lg);
}

.fr-urun-card__media { padding: var(--fr-sp-4) var(--fr-sp-4) 0; }
.fr-urun-card__media .fr-slider__frame { aspect-ratio: 1 / 1; }

.fr-urun-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--fr-sp-5) var(--fr-sp-6) var(--fr-sp-6);
}

.fr-urun-card__title {
  margin: .25rem 0 .75rem;
  font-size: var(--fr-fs-xl);
  font-weight: var(--fr-fw-semibold);
  color: var(--fr-white);
}

.fr-urun-card__text {
  margin: 0 0 var(--fr-sp-4);
  font-size: var(--fr-fs-sm);
  line-height: var(--fr-lh-loose);
  color: var(--fr-text-soft);
}

.fr-urun-card__list {
  margin: 0 0 var(--fr-sp-5);
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
}
.fr-urun-card__list li {
  position: relative;
  padding-left: 1.375rem;
  font-size: var(--fr-fs-sm);
  color: var(--fr-text-soft);
}
.fr-urun-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: .5rem; height: .5rem;
  border-radius: var(--fr-r-pill);
  background: var(--fr-grad-gold);
}

.fr-urun-card .fr-btn { margin-top: auto; align-self: flex-start; }

/* Kampanya karti — hafif farkli, sicak zemin */
.fr-urun-card--kampanya {
  background: linear-gradient(165deg, rgba(155,129,108,.14) 0%, var(--fr-bg-card) 45%);
  border-color: var(--fr-accent-soft);
}
.fr-urun-card__kampanya-rozet {
  position: absolute;
  top: var(--fr-sp-5); right: var(--fr-sp-5);
  z-index: 1;
  padding: .375rem .875rem;
  border-radius: var(--fr-r-pill);
  background: var(--fr-grad-gold);
  color: var(--fr-navy-950);
  font-size: var(--fr-fs-xs);
  font-weight: var(--fr-fw-bold);
}
.fr-urun-card--kampanya .fr-urun-card__body { padding-top: clamp(2.5rem, 6vw, 3.5rem); }
.fr-urun-card__fiyat {
  margin: 0 0 .75rem;
  font-size: var(--fr-fs-3xl);
  font-weight: var(--fr-fw-bold);
  color: var(--fr-accent-soft);
  line-height: 1;
}
.fr-urun-card__fiyat span { font-size: var(--fr-fs-lg); font-weight: var(--fr-fw-medium); }

/* ================================================================ BELGELERIMIZ */

.fr-belge-grid {
  display: grid;
  gap: clamp(var(--fr-sp-6), 4vw, var(--fr-sp-8));
  grid-template-columns: 1fr;
  max-width: 56rem;
  margin-inline: auto;
}
@media (min-width: 760px) {
  .fr-belge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fr-belge-card {
  margin: 0;
  background: var(--fr-bg-card);
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-xl);
  overflow: hidden;
  box-shadow: var(--fr-shadow-lg);
  transition: transform var(--fr-t-base), box-shadow var(--fr-t-base);
}
.fr-belge-card:hover { transform: translateY(-4px); box-shadow: var(--fr-shadow-xl); }

.fr-belge-card__media {
  aspect-ratio: 3 / 4;
  background: #fff;   /* belgeler beyaz zeminli taranmis kagit — kendi zemini korunur */
}
.fr-belge-card__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

.fr-belge-card__body { padding: var(--fr-sp-5) var(--fr-sp-6) var(--fr-sp-6); }

.fr-belge-card__icon {
  display: inline-grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  margin-bottom: var(--fr-sp-3);
  border-radius: var(--fr-r-md);
  background: var(--fr-accent-faint);
  color: var(--fr-accent-soft);
}
.fr-belge-card__icon svg { width: 1.25rem; height: 1.25rem; }

.fr-belge-card__title {
  margin: 0 0 .5rem;
  font-size: var(--fr-fs-lg);
  font-weight: var(--fr-fw-semibold);
  color: var(--fr-white);
}

.fr-belge-card__text {
  margin: 0;
  font-size: var(--fr-fs-sm);
  line-height: var(--fr-lh-loose);
  color: var(--fr-text-soft);
}

.fr-belge-tablo { max-width: 42rem; margin-inline: auto; min-width: 26rem; }

/* ================================================================ ILETISIM SAYFASI (harita + bilgi) */

.fr-iletisim-grid {
  display: grid;
  gap: clamp(var(--fr-sp-6), 4vw, var(--fr-sp-8));
  align-items: start;
}
@media (min-width: 900px) {
  .fr-iletisim-grid { grid-template-columns: 1fr 1.2fr; }
}

.fr-iletisim-list { margin: var(--fr-sp-5) 0 0; padding: 0; list-style: none; }
.fr-iletisim-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--fr-sp-3);
}
.fr-iletisim-list li + li { margin-top: var(--fr-sp-4); }

.fr-iletisim-list__icon {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  flex: none;
  border-radius: var(--fr-r-md);
  background: var(--fr-accent-faint);
  color: var(--fr-accent-deep);
}
.fr-iletisim-list__icon svg { width: 1.125rem; height: 1.125rem; }

.fr-iletisim-list__label {
  display: block;
  font-size: var(--fr-fs-xs);
  font-weight: var(--fr-fw-medium);
  color: var(--fr-text-soft);
  margin-bottom: .125rem;
}

.fr-iletisim-harita {
  aspect-ratio: 4 / 3;
  border-radius: var(--fr-r-xl);
  overflow: hidden;
  border: 1px solid var(--fr-line);
  box-shadow: var(--fr-shadow-lg);
}
.fr-iletisim-harita iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ================================================================ SAYFA BASLIGI */

.fr-pagehead {
  position: relative;
  padding-block: clamp(var(--fr-sp-8), 5vw, var(--fr-sp-10));
  background: var(--fr-grad-dark);
  color: var(--fr-text-on-dark);
  text-align: center;
}

.fr-pagehead__title {
  margin: 0 0 var(--fr-sp-3);
  font-size: var(--fr-fs-3xl);
  font-weight: var(--fr-fw-semibold);
  line-height: var(--fr-lh-tight);
  letter-spacing: var(--fr-ls-tight);
}

.fr-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fr-sp-2);
  margin: 0; padding: 0;
  list-style: none;
  font-size: var(--fr-fs-xs);
  color: var(--fr-text-on-dark-soft);
}
.fr-crumbs li { margin: 0; display: inline-flex; align-items: center; gap: var(--fr-sp-2); }
.fr-crumbs li + li::before { content: "/"; opacity: .45; }
.fr-crumbs a { color: inherit; text-decoration: none; }
.fr-crumbs a:hover { color: var(--fr-white); }

/* ================================================================ YAZI LISTESI */

.fr-posts {
  display: grid;
  gap: var(--fr-sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.fr-post-card {
  display: flex;
  flex-direction: column;
  background: var(--fr-bg-card);
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-lg);
  overflow: hidden;
  transition: transform var(--fr-t-base), box-shadow var(--fr-t-base);
}
.fr-post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--fr-shadow-lg);
}

.fr-post-card__body { padding: var(--fr-sp-5); display: flex; flex-direction: column; flex: 1; }

.fr-post-card__title {
  margin: 0 0 var(--fr-sp-2);
  font-size: var(--fr-fs-lg);
  font-weight: var(--fr-fw-semibold);
  line-height: var(--fr-lh-snug);
}
.fr-post-card__title a { color: var(--fr-text); text-decoration: none; }
.fr-post-card__title a:hover { color: var(--fr-accent-deep); }

.fr-post-card__meta {
  margin: 0 0 var(--fr-sp-3);
  font-size: var(--fr-fs-xs);
  color: var(--fr-text-soft);
}

.fr-post-card__excerpt {
  margin: 0 0 var(--fr-sp-4);
  font-size: var(--fr-fs-sm);
  line-height: var(--fr-lh-loose);
  color: var(--fr-text-soft);
}

.fr-post-card__foot { margin-top: auto; }

/* Sayfalama */
.fr-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fr-sp-2);
  margin-top: var(--fr-sp-8);
}
.fr-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.5rem; height: 2.5rem;
  padding-inline: .625rem;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-sm);
  color: var(--fr-text);
  font-size: var(--fr-fs-sm);
  font-weight: var(--fr-fw-medium);
  text-decoration: none;
}
.fr-pagination .page-numbers:hover { border-color: var(--fr-accent); color: var(--fr-accent-deep); }
.fr-pagination .page-numbers.current {
  background: var(--fr-navy-900);
  border-color: var(--fr-navy-900);
  color: var(--fr-white);
}