/* ─────────────────────────────────────────────────────────────────────────
   theme.css — modern layout layer, loaded last on every page.
   Uses the site's original light palette (#f7f8fe canvas, blue→cyan brand gradient,
   per-section accent colours from default.css) and adds structure on top: fixed glass
   navbar, two-column hero, glass cards, mock-up frames around illustrations, mobile
   flow layouts. Colours that default.css/refine.css already define are left to them.
   Scroll-in motion lives in src/enhance/reveal.js.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;
  /* Original palette (default.css / refine.css --wb-* tokens). */
  --t-bg: #f7f8fe;
  --t-bg-2: #f4f8fd;
  --t-surface: rgb(255 255 255 / 0.72);
  --t-surface-2: rgb(255 255 255 / 0.94);
  --t-surface-solid: #ffffff;
  --t-border: rgb(43 83 118 / 0.10);
  --t-border-2: rgb(43 83 118 / 0.16);
  --t-text: #3e3d3e;
  --t-text-2: #212529;
  --t-muted: #5f6b7a;
  --t-blue: #2d7bbe;
  --t-blue-2: #3182c1;
  --t-sky: #5cc7d8;
  --t-blue-text: #2d7bbe;
  --t-cyan: #5cc7d8;
  --t-grad: linear-gradient(90deg, rgb(45 123 190), rgb(92 199 216));
  --t-grad-hot: linear-gradient(90deg, rgb(45 123 190), rgb(92 199 216));
  --t-grad-text: linear-gradient(90deg, rgb(48 121 183) 0%, rgb(92 198 216) 60%);
  --t-blur: 16px;
  --t-r-lg: 16px;
  --t-r-xl: 20px;
  --t-r-2xl: 24px;
  --t-shadow: 0 1px 2px rgb(43 83 118 / 0.06), 0 8px 24px -16px rgb(43 83 118 / 0.22);
  --t-glow: 0 2px 4px rgb(43 83 118 / 0.04), 20px 20px 40px 0 rgb(43 83 118 / 0.15);
  --t-glow-btn: 0 6px 18px -8px rgb(45 123 190 / 0.6);
  --t-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ───────── Canvas ───────── */
body { overflow-x: clip; }

/* ───────── Typography ───────── */
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; }
p { line-height: 1.75; }
@media (min-width: 992px) { p, section.detay ul li { font-size: 17px; } }

h2.gradient-yazi, .referanslar h2, .detay h2.alt-cizgi, .detay h2:not(.alt-cizgi) {
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
/* Underline bar: rounder and a little bolder; its colour stays the section's (default.css). */
section .alt-cizgi::before, .alt-cizgi::before { height: 4px !important; width: 56px !important; border-radius: 99px; }

/* Keyword eyebrow inside the home H1: a block-level pill so it can never share a line box with
   the headline (it used to be inline-flex inside a 1.06 line-height H1). */
.wb-eyebrow {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 0.75rem;
  padding: 6px 14px;
  font-size: 13px !important;
  font-weight: 700;
  line-height: normal !important;
  letter-spacing: 0.01em !important;
  text-align: center;
  white-space: normal;
  color: var(--t-blue);
  -webkit-text-fill-color: var(--t-blue);
  background: rgb(45 123 190 / 0.08);
  border: 1px solid rgb(45 123 190 / 0.2);
  border-radius: 999px;
  box-shadow: 0 6px 18px -10px rgb(45 123 190 / 0.5);
}
.wb-eyebrow::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; margin: -2px 8px 0 0; border-radius: 50%;
  background: var(--t-sky); box-shadow: 0 0 6px var(--t-sky);
}

/* ───────── Buttons ───────── */
.gradient-btn, .btn.gradient-btn {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--t-grad) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: var(--t-glow-btn) !important;
}
/* overflow:hidden (which keeps the sweep inside) needs a non-inline box; the nav CTA was inline. */
.loginlink.gradient-btn { display: inline-flex !important; align-items: center; }
/* Light sweep on hover (transform only). */
.gradient-btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.7s var(--t-ease) !important;
}
@media (hover: hover) {
  .gradient-btn:hover { box-shadow: 0 10px 24px -8px rgb(57 143 197 / 0.75) !important; }
  .gradient-btn:hover::after { transform: translateX(110%); }
}

/* ───────── Glass primitive ───────── */
section.wifi .kutu .card,
.panel-ekran .mobil-dash .card,
.numarali-slider,
.sektor .card,
.paketler .paket,
.detay.kurulum .card,
.ozellik-kutular .card,
.sss-item {
  background: var(--t-surface) !important;
  -webkit-backdrop-filter: blur(var(--t-blur)) saturate(140%);
  backdrop-filter: blur(var(--t-blur)) saturate(140%);
  border: 1px solid var(--t-border) !important;
  box-shadow: var(--t-shadow) !important;
}

/* ───────── Navbar ───────── */
header.header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  padding: 10px 12px 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
}
header.header > .container-wifi {
  max-width: 1240px;
  border-radius: var(--t-r-xl);
  /* Opaque instead of backdrop-filter: a filter here would become the containing block of the
     fixed mobile drawer inside it (see CLAUDE.md). Blur is used on independent cards only. */
  background: rgb(247 248 254 / 0.92);
  border: 1px solid var(--t-border);
  box-shadow: 0 10px 30px -20px rgb(43 83 118 / 0.35);
  transition: background-color 0.3s var(--t-ease), box-shadow 0.3s var(--t-ease) !important;
}
header.header.is-stuck > .container-wifi {
  background: rgb(255 255 255 / 0.97);
  box-shadow: 0 1px 0 var(--t-border), 0 16px 40px -20px rgb(43 83 118 / 0.4);
}
header.header .navbar { padding-top: 8px !important; padding-bottom: 8px !important; }
header .navbar-brand { display: inline-flex; align-items: center; margin: 0; width: auto !important; max-width: 62%; }
header .navbar-brand img { max-height: 40px; width: auto; }
@media (min-width: 992px) {
  header .navbar-brand { max-width: 230px; }
}
.navbar-toggler { background: var(--t-grad) !important; box-shadow: var(--t-glow-btn) !important; }
.navbar-toggler i { color: #fff !important; }
/* Mobile drawer (refine.css owns the mechanics). */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: rgb(247 248 254 / 0.98) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    padding-top: 96px !important;
  }
  .navbar-collapse .navbar-nav .nav-link { padding-left: 6px !important; font-size: 20px !important; font-weight: 800; }
  .navbar-collapse .loginlink.gradient-yazi {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px;
    border: 1px solid var(--t-border-2); border-radius: 999px; margin-bottom: 8px;
  }
  header.header { padding: 8px 8px 0; }
}

/* ───────── Hero (home) ───────── */
.giris-sabit { isolation: isolate; }
.giris { padding-top: 110px; }
.giris .sloganBaslik {
  font-weight: 800 !important;
  font-size: clamp(1.625rem, 1rem + 2.6vw, 3.4rem) !important;
  line-height: 1.16 !important;   /* room for İ/Ş/Ğ marks between lines */
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.giris .hareketli::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: 70vmin; height: 70vmin; right: 0; bottom: 0;
  background: radial-gradient(closest-side, rgb(92 199 216 / 0.18), rgb(45 123 190 / 0.06) 55%, transparent);
}
.owl-carousel .hareketli .noktalar { pointer-events: none; }
.abonelik .form-group button { font-size: 14px !important; }

@media (max-width: 767.98px) {
  /* Phones: the hero becomes a normal flow column (copy → form → illustration). The
     illustration used to be absolutely pinned to the bottom of a fixed-height box and slid
     over the H1 and the e-mail form on shorter screens. */
  .giris-sabit, .giris { height: auto !important; }
  .giris {
    display: flex; flex-direction: column; gap: 28px;
    padding: 104px 16px 40px !important;
  }
  .giris .slogan { order: 1; padding: 0 !important; }
  .giris .sloganBaslik { margin: 0 !important; font-size: 1.625rem !important; line-height: 1.25 !important; }
  .giris .abonelik { width: 100%; margin-top: 20px; }
  .giris .hareketli { order: 2; position: relative; display: flex; justify-content: center; }
  .owl-carousel .hareketli .sol-resim,
  .owl-carousel .hareketli .sag-resim {
    position: static !important;
    width: min(80%, 320px) !important;
    margin: 0 auto;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  }
  .giris .hareketli::before { inset: -10% 0; width: auto; height: auto; }
  .kurumsal-git { display: none !important; }
}
@media (max-width: 380px) {
  .giris .sloganBaslik { font-size: 1.5rem !important; }
  .wb-eyebrow { font-size: 12px !important; padding: 5px 12px; }
}
@media (min-width: 992px) {
  /* Two-column hero: copy on the left, illustration cluster on the right. */
  .giris .slogan {
    position: absolute; z-index: 2;
    left: max(5vw, calc((100vw - 1240px) / 2 + 24px)); top: 50%;
    width: min(600px, 46vw);
    padding: 0 !important;
    transform: translateY(-46%);
    text-align: left;
  }
  .giris .sloganBaslik { text-align: left !important; margin: 0 !important; line-height: 1.1 !important; }
  .giris .sloganBaslik .wb-eyebrow { margin-left: 0; }
  .giris .abonelik { width: 100%; margin: 28px 0 0; }
  .owl-carousel .hareketli .sag-resim { width: 34vw !important; max-width: 560px; right: 3vw !important; left: auto !important; top: 20% !important; bottom: auto !important; }
  .owl-carousel .hareketli .sol-resim { width: 19vw !important; max-width: 320px; right: 27vw !important; left: auto !important; bottom: 7% !important; }
  .giris .hareketli::before { right: 0; top: 5%; bottom: auto; width: 62vw; height: 62vw; max-width: 980px; max-height: 980px; }
}

/* ───────── Inner page banner ───────── */
/* default.css gives the banner a fixed 30vh with bottom-aligned content, so a two-line H1 grew
   upward under the fixed navbar. Let it grow downward instead, starting below the navbar. */
.navBrand { padding-top: 70px; }
.detay-sayfa .navBrand { height: auto !important; min-height: 30vh; padding-top: 120px; }
.detay-sayfa .navBrand .ortala { width: min(760px, 92%) !important; }
.navBrand h1.baslik .baslik-alt { text-wrap: balance; }
.detay-sayfa .navBrand h1.baslik {
  font-size: clamp(2rem, 1.3rem + 3.2vw, 4rem) !important;
  font-weight: 900; line-height: 1.15 !important; letter-spacing: -0.03em;
}
.navBrand h1.baslik .baslik-alt {
  margin-top: 14px !important;
  font-size: clamp(16px, 0.9rem + 0.7vw, 24px) !important;
  font-weight: 800 !important; letter-spacing: -0.01em !important;
  background: var(--t-grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.navBrand ul li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; margin: 4px;
  border-radius: 999px; border: 1px solid var(--t-border); background: var(--t-surface);
  font-weight: 700;
}

/* ───────── Feature cards (home) ───────── */
section.wifi .kutu::before { display: none !important; }
section.wifi .kutu .card {
  height: 100%;
  margin: 8px;
  padding: 22px 20px 18px;
  border-radius: var(--t-r-xl) !important;
  overflow: hidden;
}
section.wifi .kutu .card::before {
  /* Corner glow that brightens on hover. */
  content: ''; position: absolute; inset: -40% 40% 40% -40%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgb(92 199 216 / 0.16), transparent 60%);
  opacity: 0.6; transition: opacity 0.35s var(--t-ease) !important;
}
section.wifi .kutu .card > * { position: relative; z-index: 1; }
section.wifi .kutu .card > img {
  width: 56px; height: 56px; padding: 10px; box-sizing: content-box;
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff, #e8f2fd);
  box-shadow: 0 10px 24px -12px rgb(45 123 190 / 0.45);
}
section.wifi .kutu .card-title { font-weight: 900; font-size: 1.25rem; margin-top: 16px; }
@media (max-width: 575.98px) {
  /* Phones: one card per row, icon beside the copy, clear gaps between cards. */
  section.wifi .row.col-12 { margin: 0 !important; padding: 0 12px !important; row-gap: 14px; }
  section.wifi .kutu { flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; }
  section.wifi .kutu .card {
    display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start;
    margin: 0; padding: 18px 18px 16px; border-radius: var(--t-r-xl) !important;
  }
  section.wifi .kutu .card > img { width: 40px; height: 40px; padding: 8px; border-radius: 14px; }
  section.wifi .kutu .card-body { padding: 0; }
  section.wifi .kutu .card-title { font-size: 1.1rem; margin: 2px 0 6px; }
}
section.wifi .kutu:hover .card { background: #fff !important; border-color: rgb(92 199 216 / 0.45) !important; box-shadow: var(--t-glow) !important; }
section.wifi .kutu:hover .card::before { opacity: 1; }

/* ───────── All-devices showcase ───────── */
main section.panel-ekran { position: relative; }
.panel-ekran .mobil-dash .card { border-radius: var(--t-r-2xl) !important; padding: 18px 10px 6px; }
.panel-ekran .card-title img, .list-group-item h5 img {
  background: #fff; border-radius: 8px; padding: 3px; margin-right: 8px; box-sizing: content-box;
}
.list-group-item, .list-group-item.active {
  border: 1px solid transparent !important;
  border-radius: var(--t-r-lg) !important;
  padding: 12px 14px !important;
  margin-bottom: 6px;
}
.list-group-item.active {
  background: var(--t-surface-2) !important;
  border-color: rgb(92 199 216 / 0.4) !important;
  box-shadow: var(--t-shadow);
}
/* default.css pulls the mock-up 100px up under the intro paragraph at ≥1200px. */
.panel-ekran .yatay .tablet-dash .tab-pane .cihaz-bg { margin-top: 0 !important; }
.yatay .tablet-dash {
  border-radius: var(--t-r-2xl);
  background: radial-gradient(ellipse at center, rgb(92 199 216 / 0.12), transparent 70%);
}

/* Device mock-ups load in the background (src/enhance/lazyImages.js). Until the image is decoded a
   phone-shaped placeholder with a soft pulse holds the space; then the art fades in. */
.cihaz-bg { position: relative; isolation: isolate; }
.cihaz-bg[data-bg]::before, .cihaz-bg.wb-bg-pending::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: min(56%, 230px); aspect-ratio: 9 / 18; max-height: 92%;
  transform: translate(-50%, -50%);
  border-radius: 28px;
  border: 1px solid var(--t-border-2);
  background: linear-gradient(160deg, #ffffff, #e6eff9);
  animation: wb-pulse 1.4s ease-in-out infinite alternate; /* opacity only: stays on the compositor */
}
.tablet-dash .cihaz-bg[data-bg]::before, .tablet-dash .cihaz-bg.wb-bg-pending::before {
  width: min(70%, 560px); aspect-ratio: 4 / 3; border-radius: 22px; /* tablet panes are landscape */
}
.cihaz-bg.wb-bg-ready { animation: wb-fade-in 0.45s var(--t-ease) both; }
@keyframes wb-pulse { from { opacity: 0.45; } to { opacity: 1; } }
@keyframes wb-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cihaz-bg[data-bg]::before, .cihaz-bg.wb-bg-pending::before { animation: none; }
  .cihaz-bg.wb-bg-ready { animation: none; }
}

/* ───────── Video ───────── */
section.videobox iframe, .detay.kurulum .satir2 .video > a {
  border-radius: var(--t-r-xl) !important;
  border: 1px solid var(--t-border) !important;
  box-shadow: 0 0 0 6px rgb(255 255 255 / 0.7), 20px 20px 40px 0 rgb(43 83 118 / 0.18) !important;
  background: #000;
}

/* ───────── How it installs ───────── */
/* The modem and floating icons are positioned against the section itself (default.css);
   keep it the containing block and slide the glow underneath with a local stacking context. */
main section.nasil-calisiyor { isolation: isolate; }
main section.nasil-calisiyor::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 55%; width: 90vmin; height: 90vmin; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgb(255 255 255 / 0.7), rgb(92 199 216 / 0.08) 45%, transparent 70%);
}

/* ───────── "Nasıl Kurulur?" icons ─────────
   The original scattered layout (default.css top/left per icon) is kept. Each nc-iko*.png draws its
   disc in the upper-left of the canvas with a soft shadow filling the rest, so the visible disc sat
   off-centre in its own box. Measured from the alpha channel (canvas W, disc box at x0,y0 size d):
   clip-path keeps only the disc and `translate` (composes with animate.css transforms) moves its
   centre to the centre of the icon's box. All values are % of the image, so any display size works.
   Re-measure if an icon file changes. */
section.nasil-calisiyor img[src$="nc-iko2.png"],
section.nasil-calisiyor img[src$="nc-iko5.png"] { clip-path: circle(29.14% at 35.76% 32.45%); translate: 14.24% 17.55%; }  /* 151px, d88 @10,5 */
section.nasil-calisiyor img[src$="nc-iko4.png"] { clip-path: circle(30.43% at 36.65% 33.54%); translate: 13.35% 16.46%; }  /* 161px, d98 @10,5 */
section.nasil-calisiyor img[src$="nc-iko6.png"] { clip-path: circle(31.14% at 37.13% 34.13%); translate: 12.87% 15.87%; }  /* 167px, d104 @10,5 */
section.nasil-calisiyor img[src$="nc-iko7.png"] { clip-path: circle(32.5% at 38.06% 35.28%);  translate: 11.94% 14.72%; }  /* 180px, d117 @10,5 */
/* Speech bubble: 171×88 canvas, bubble 140×56 at 6,3. */
section.nasil-calisiyor img[src$="nc-iko3.png"] { clip-path: inset(3.41% 14.62% 32.95% 3.51% round 12px); translate: 5.56% 14.77%; }
/* nc-iko1.png is already a full, centred disc; the wifi glyph has no shadow. */
/* Icons are placed in % of a 100vh section; on short phones (iPhone SE, 667px) the camera icon
   reached the copy. A floor on the height keeps the same arrangement, just with room. */
@media (max-width: 575.98px) { main section.nasil-calisiyor { height: max(100vh, 780px) !important; } }

/* ───────── 5651 slider (home) ───────── */
section.internet-paylasim .numarali-slider {
  border-radius: var(--t-r-2xl) !important;
  padding: clamp(18px, 3vw, 40px) !important;
  background:
    radial-gradient(120% 80% at 100% 0%, rgb(92 199 216 / 0.10), transparent 55%),
    rgb(255 255 255 / 0.9) !important;
}
.slider-resim img {
  border-radius: var(--t-r-xl);
  background: linear-gradient(160deg, #f4f8ff, #dbe8fb);
  padding: 10px;
  border: 1px solid #fff;
  box-shadow: 20px 20px 40px 0 rgb(43 83 118 / 0.15);
}

/* ───────── Sectors ───────── */
/* Each card is a glass container; the illustration sits in its own rounded inset and the title
   moves below it instead of being drawn on top of the artwork (original brand-blue title). */
.sektor .card {
  padding: 12px 12px 4px !important;
  border-radius: var(--t-r-2xl) !important;
}
.sektorler .sektorResim { border-radius: var(--t-r-lg) !important; overflow: hidden; background: #EEF4FF; }
section.sektorler .sektor .card img.card-img-top { border-radius: 0 !important; }
section.sektorler .sektor .metin {
  position: static !important; inset: auto !important;
  padding: 14px 8px 10px !important;
}
section.sektorler .sektor .metin h4 {
  display: block; margin: 0; white-space: nowrap;
  font-weight: 800; font-size: 1.15rem;
}
section.sektorler .sektor .metin h4 img { display: inline-block; vertical-align: -3px; margin-left: 6px; }
.sektor .card:hover { background: #fff !important; border-color: rgb(92 199 216 / 0.45) !important; box-shadow: var(--t-glow) !important; }
.owl-carousel.sektor .owl-nav button.owl-next,
.owl-carousel.sektor .owl-nav button.owl-prev,
.refmuset .owl-nav button, .kaydirmaNav .owl-nav button, .mobil-dash .owl-nav button { border-radius: 50% !important; }

/* ───────── Logo wall ───────── */
.referanslar .ref { border-radius: var(--t-r-lg) !important; padding: 10px 14px; }
main .referanslar hr, main hr, .detay hr {
  border: 0 !important; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(43 83 118 / 0.14), transparent) !important;
}

/* ───────── "Biz Sizi Arayalım" ───────── */
/* The original blue panel (brand gradient), now as one rounded card. */
.sizi-arayalim .row.m-0 {
  border-radius: var(--t-r-2xl) !important;
  padding: clamp(20px, 3vw, 44px) clamp(8px, 2vw, 24px) !important;
  background-color: rgb(45 123 190);
  background-image: linear-gradient(45deg, rgb(92 199 216), rgb(45 123 190));
  box-shadow: 0 30px 60px -30px rgb(45 123 190 / 0.6);
}
.sizi-arayalim h4 { font-weight: 900; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); }

/* ───────── Detail pages ───────── */
.detay .ozellik-ikon {
  padding: 10px; border-radius: 16px; box-sizing: content-box;
  background: #fff;
  box-shadow: 0 10px 24px -12px rgb(45 123 190 / 0.4);
}
.wb-frame {
  margin: 0;
  border-radius: var(--t-r-xl);
  padding: 0 10px 10px;
  background: linear-gradient(180deg, #ffffff, #f4f8fd);
  border: 1px solid var(--t-border);
  box-shadow: 20px 20px 40px 0 rgb(43 83 118 / 0.15);
  overflow: hidden;
}
.wb-frame-bar { display: flex; gap: 6px; padding: 12px 6px; }
.wb-frame-bar i { width: 10px; height: 10px; border-radius: 50%; }
.wb-frame-bar i:nth-child(1) { background: #ff5f57; }
.wb-frame-bar i:nth-child(2) { background: #febc2e; }
.wb-frame-bar i:nth-child(3) { background: #28c840; }
.wb-frame img {
  display: block; width: 100%; height: auto;
  border-radius: 14px;
  background: linear-gradient(160deg, #f5f9ff 0%, #e6eff9 100%);
  animation: none !important; /* reveal.js animates the frame instead of animate.css delays */
  opacity: 1 !important;
}
.kaydirmaNav .owl-item div .kaydirmaLink { border-radius: var(--t-r-lg) !important; }
.kaydirmaNav .kaydirmaLink img { background: #fff; border-radius: 10px; padding: 3px; box-sizing: content-box; }

@media (max-width: 767.98px) {
  /* Stacked columns get a real gap; a framed image never touches the heading below it. */
  section.detay .row.m-0 { row-gap: 24px; }
  section.detay .row.m-0 > [class*="col-"] { margin-bottom: 0 !important; }
  .wb-frame { margin: 0 0 8px; }
  section.detay h2, section.detay .alt-cizgi { font-size: clamp(1.6rem, 1.2rem + 2vw, 2rem) !important; line-height: 1.2 !important; }
}

/* FAQ */
.sss-item { border-radius: var(--t-r-lg) !important; }
.sss-item[open] { border-color: rgb(92 199 216 / 0.45) !important; }

/* Pricing */
.paketler .paket { border-radius: var(--t-r-2xl) !important; }
.paketler .paket:nth-child(2) {
  border-color: rgb(92 199 216 / 0.5) !important;
  box-shadow: var(--t-glow) !important;
}

/* Setup steps */
.detay.kurulum .card, .ozellik-kutular .card { border-radius: var(--t-r-2xl) !important; }

/* Partner application panel (original gradient) as a rounded card. */
.is-ortagi .bayi-talep-form { border-radius: var(--t-r-2xl) !important; }
.form-group.mail::before, .form-group.ad::before, .form-group.sifre::before, .form-group.adres::before,
.form-group.sehir::before, .form-group.ilce::before, .form-group.tel::before { border-radius: 6px; }
.detay iframe, .map iframe {
  border-radius: var(--t-r-xl); border: 1px solid var(--t-border) !important;
  box-shadow: 20px 20px 40px 0 rgb(43 83 118 / 0.12);
}

/* ───────── Footer ───────── */
.footer .container-wifi > .row:nth-child(1) { border-radius: var(--t-r-2xl) !important; }
.footer h5 { font-weight: 900; }
.footer img[src*="footer-logo"] {
  box-sizing: border-box;       /* stays inside its column on tablets */
  max-width: min(240px, 100%);
}

/* ───────── Popup ───────── */
/* No backdrop-filter on the fixed backdrop: the card inside is the glass (see CLAUDE.md). */
.wb-modal-backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Gradient buttons and feature-nav pills inside copy are not text links (refine.css styles
   `.detay a` as underlined blue links). */
.detay a.gradient-btn { text-decoration: none !important; color: #fff !important; }
.detay a.kaydirmaLink { text-decoration: none !important; }

/* Scroll-in reveal (src/enhance/reveal.js sets the start state inline, so without JS nothing
   is hidden). Promote only while it runs. */
[data-reveal], [data-reveal]:hover {
  /* framer-motion drives opacity/transform here; a CSS transition on them would lag every frame. */
  transition-property: color, background-color, border-color, box-shadow, filter !important;
}
[data-revealing] { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .gradient-btn::after { display: none; }
}