/* =========================================================
   ELÇİ VETERİNER — STYLES (Temiz & Modüler)
   ========================================================= */

/* ========================
   0) TOKENS / VARIABLES
   ======================== */
:root{
  /* Marka paleti (default = emerald/klinik teal) */
  --brand:#0c4e54;
  --brand2:#0f5960;
  --accent:#10b3d1;

  /* Metin ve zemin */
  --ink:#111822;
  --muted:#6b7a7c;
  --bg:#f5fbfc;

  /* Yüzey / kart */
  --card:#ffffff;
  --card-border:#e9eff0;
  --chip:#e6f2ff;

  /* Footer gradyanı (tema override edebilir) */
  --footer-start: var(--brand2);
  --footer-end:   var(--brand);

  /* Link & Buton */
  --link: var(--accent);
  --link-hover:#13c6e8;
  --btn-bg: var(--brand);
  --btn-fg:#fff;
  --btn-bg-hover: color-mix(in srgb, var(--brand), #fff 8%);
  --btn-ghost-fg: var(--brand);

  /* Gölge & radius & spacing */
  --shadow:0 2px 12px rgba(0,0,0,.06);
  --shadow-md:0 6px 18px rgba(0,0,0,.08);
  --shadow-lg:0 12px 28px rgba(0,0,0,.12);
  --radius-lg:18px; --radius:14px; --radius-sm:10px;
  --gap:14px;

  /* Hero vars (tema override eder) */
  --hero-start: color-mix(in srgb, var(--brand) 88%, #fff 12%);
  --hero-end:   color-mix(in srgb, var(--brand2) 88%, #fff 12%);

  /* Divider yardımcı (accent rgb) */
  --accent-rgb: 16 179 209; /* #10b3d1 */
}

/* ========================
   1) THEMES (sadece değişken override)
   ======================== */
.theme-emerald{
  --brand:#0c4e54; --brand2:#0f5960; --accent:#10b3d1;
  --hero-start: color-mix(in srgb, #0c4e54 88%, #fff 12%);
  --hero-end:   color-mix(in srgb, #0f5960 88%, #fff 12%);
  --footer-start:#0f5960; --footer-end:#0c4e54;
}

/* Mor + turkuaz (logo ile uyumlu) */
.theme-plumOcean{
  --violet-deep:#4a138c;
  --ocean-light:#38caea;

  --brand: var(--violet-deep);
  --brand2:#6a0ea1;
  --accent: var(--ocean-light);

  --hero-start: color-mix(in srgb, var(--violet-deep) 88%, #fff 12%);
  --hero-end:   color-mix(in srgb, var(--ocean-light) 88%, #fff 12%);

  --footer-start: var(--violet-deep);
  --footer-end:   var(--ocean-light);
}

/* Kurumsal mavi */
.theme-ocean{
  --brand:#0a4aa6; --brand2:#083a86; --accent:#2b8cff;
  --hero-start: color-mix(in srgb, #083a86 88%, #fff 12%);
  --hero-end:   color-mix(in srgb, #0a4aa6 88%, #fff 12%);
  --footer-start:#083a86; --footer-end:#0a4aa6;
}

/* Slate nötr */
.theme-slate{
  --brand:#2e3a46; --brand2:#1f2a33; --accent:#4aa3b7;
  --hero-start: color-mix(in srgb, #2e3a46 88%, #fff 12%);
  --hero-end:   color-mix(in srgb, #1f2a33 88%, #fff 12%);
  --footer-start:#1f2a33; --footer-end:#2e3a46;
}

/* ========================
   2) RESET & BASE
   ======================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--ink); background:#fff;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6; padding-top:138px;
}
@media(max-width:992px){ body{padding-top:122px} }
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:var(--link)}
a:hover{color:var(--link-hover)}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted)}
.grid{display:grid;gap:var(--gap)}
.hidden{display:none!important}

/* ========================
   3) BUTTONS & CHIPS
   ======================== */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:12px;
  border:1px solid var(--btn-ghost-fg);font-weight:700;cursor:pointer;color:var(--btn-ghost-fg);
  background:#fff; box-shadow:var(--shadow);
}
.btn.primary{background:var(--btn-bg);color:var(--btn-fg);border-color:transparent}
.btn.primary:hover{background:var(--btn-bg-hover)}
.btn.ghost{background:transparent;color:var(--btn-ghost-fg)}
.btn.ghost:hover{background:color-mix(in srgb, var(--btn-ghost-fg), #fff 92%)}
.chip{
  display:inline-block;padding:6px 10px;border-radius:999px;background:var(--chip);
  color:color-mix(in srgb, var(--brand), #000 20%); font-weight:700;font-size:12px
}

/* ========================
   4) HEADER & NAV
   ======================== */
header{position:fixed;inset:0 0 auto 0;z-index:60;background:#fff;box-shadow:var(--shadow)}
.header-top{background:var(--brand);color:#fff;font-size:14px}
.header-top .container{display:flex;justify-content:space-between;align-items:center;padding:6px 16px;gap:12px;flex-wrap:wrap}
.header-contact{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.header-contact a{color:#fff;opacity:.95}
.header-contact a:hover{opacity:1}
.header-main{padding:12px 0}
.header-main .container{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo-text h1{font:700 22px/1 Montserrat,system-ui,Segoe UI,Arial,sans-serif;color:var(--brand);margin:0 0 2px}
.logo-text span{color:var(--brand2);font:700 13px/1.2 Montserrat,system-ui}

/* NAV */
nav{position:relative}
nav ul{display:flex;list-style:none;align-items:center;gap:18px;margin:0;padding:0}
nav a{color:#1a1a1a;font:600 15px/1.2 Montserrat,system-ui;position:relative;padding:6px 0;display:inline-flex;align-items:center}
nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--accent);transition:width .25s}
nav a:hover::after{width:100%}
nav a.active{color:var(--brand)}
nav a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.mobile-menu-btn{display:none;background:none;border:0;font-size:22px;color:var(--brand);cursor:pointer}
.dropdown{position:relative}
.dropdown-content{
  position:absolute;top:100%;left:0;z-index:70;min-width:260px;background:#fff;border:1px solid #e8f1f2;border-radius:12px;
  box-shadow:0 12px 24px rgba(0,0,0,.08);padding:8px;display:none;flex-direction:column;gap:4px;
}
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content{display:flex}
.dropdown-content a{display:block;padding:10px 12px;border-radius:8px;color:#233;white-space:nowrap}
.dropdown-content a:hover{background:#f0f7f7;color:var(--brand)}
@media(max-width:992px){
  .mobile-menu-btn{display:block}
  nav ul{position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;gap:0;display:none;border-top:1px solid #eef4f4}
  nav ul.show{display:flex}
  nav li{width:100%}
  nav a{padding:12px 16px;display:block}
  .dropdown-content{position:static;display:none;border:0;box-shadow:none;padding:0;margin:-6px 0 6px 12px;gap:2px}
  .dropdown.active .dropdown-content{display:flex}
}

/* Tema: plumOcean için header şeridi */
.theme-plumOcean .header-top{
  background:linear-gradient(90deg, var(--violet-deep), var(--ocean-light));
}
.theme-plumOcean nav a.active{ color: var(--violet-deep); }
.theme-plumOcean nav a:hover::after{background:var(--ocean-light)}

/* ========================
   5) HERO
   ======================== */
.hero{
  background:
    radial-gradient(1200px 600px at 80% -100px, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(120deg, var(--hero-start) 0%, var(--hero-end) 100%);
  color:#fff;
}
.hero .container{display:grid;place-items:center}
.hero-center{ text-align:center; padding:80px 0 36px; display:flex;flex-direction:column;align-items:center;gap:12px; max-width:980px }
.hero-logo{ width:96px;height:96px;object-fit:contain;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));border-radius:50% }
.hero h1{ font-size:clamp(28px,4.8vw,52px); margin:0 }
.hero-divider{
  width:120px;height:6px;border-radius:999px;margin:10px auto 14px;
  background:linear-gradient(90deg, rgb(var(--accent-rgb)/.95), rgb(var(--accent-rgb)/.75));
}
.hero-sub{ max-width:820px;font-size:18px;opacity:.92;margin:0 auto }
.hero-cta{ display:flex;gap:10px;margin-top:14px;flex-wrap:wrap }

/* plumOcean’da divider mor→turkuaz harmanı */
.theme-plumOcean .hero-divider{
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--violet-deep) 92%, #fff 8%),
    color-mix(in srgb, var(--ocean-light) 88%, #fff 12%));
}

/* Quick links */
:root{ --icon-size:28px; --icon-color:#fff; --icon-opacity:.96; }
.quick-links{ display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:10px;margin-top:18px;width:100% }
.quick-links .q{
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px;border-radius:14px;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  transition:transform .18s, background .18s, box-shadow .18s; backdrop-filter:saturate(1.2) blur(1px)
}
.quick-links .q:hover{ transform:translateY(-3px);background:rgba(255,255,255,.12);box-shadow:0 10px 25px rgba(0,0,0,.18) }
.q .icon{ width:var(--icon-size);height:var(--icon-size);display:inline-block;opacity:var(--icon-opacity) }
.q .icon svg{ width:100%;height:100%;color:var(--icon-color) }
.q:hover .icon{ transform: translateY(-2px) scale(1.03) }
@media(max-width:960px){ .quick-links{ grid-template-columns:repeat(3,1fr) } }

/* ========================
   6) HİZMETLER / CARDS + PAGER
   ======================== */
section#services{ padding:48px 0; background:#fff; position:relative; overflow:hidden }
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
@media (max-width:1100px){ .services-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .services-grid{ grid-template-columns:1fr } }

.s-card{
  position:relative;border-radius:var(--radius-lg);padding:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.6));
  border:1px solid color-mix(in srgb, var(--brand), #fff 90%);
  box-shadow:0 10px 30px color-mix(in srgb, var(--brand), #000 92%);
  backdrop-filter:saturate(1.2) blur(6px); transform:translateY(6px) scale(.99); opacity:0;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, opacity .45s; isolation:isolate;
}
.s-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent), #fff 35%), color-mix(in srgb, var(--brand), #fff 75%));
  z-index:-1; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding:1px; -webkit-mask-composite:xor; mask-composite:exclude; opacity:.7;
}
.s-card.show{ opacity:1; transform:none }
.s-card:hover{ transform:translateY(-6px) scale(1.01); box-shadow:0 18px 40px color-mix(in srgb, var(--brand), #000 85%) }
.s-icon{
  width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff;margin-bottom:10px;
  box-shadow:0 8px 16px color-mix(in srgb, var(--brand), #000 70%), inset 0 0 0 1px rgba(255,255,255,.18);
  position:relative; overflow:hidden;
}
.s-icon svg{ width:24px;height:24px }
.s-icon::after{ content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 30% 20%, rgba(255,255,255,.22), transparent 60%); mix-blend-mode:screen }
.s-title{ margin:0 0 6px; font-size:18px; font-weight:800; color:#113 }
.s-text{ margin:0; color:#223; line-height:1.6 }

.cta-bar{
  background:color-mix(in srgb, var(--bg), #fff 10%);border:1px dashed color-mix(in srgb, var(--brand), #fff 70%);
  padding:18px;border-radius:16px; display:flex;gap:10px;align-items:center;justify-content:space-between;margin:24px 0
}

/* --- Services Pager (main.js'in oluşturduğu yapı) --- */
.services-viewport{ position:relative; overflow:hidden; border-radius:16px }
.services-rail{ display:flex; width:100%; transition:transform .55s cubic-bezier(.2,.8,.2,1) }
.services-page{ flex:0 0 100%; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
@media (max-width:1100px){ .services-page{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .services-page{ grid-template-columns:1fr } }

/* Pager butonları */
.svc-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:44px;height:44px;border-radius:999px;border:1px solid #e6edf0;background:#fff;
  display:grid;place-items:center; box-shadow:0 10px 24px rgba(10,25,35,.12); cursor:pointer;
}
.svc-nav:hover{ transform:translateY(-50%) translateY(-1px); box-shadow:0 16px 32px rgba(10,25,35,.18) }
.svc-prev{ left:8px } .svc-next{ right:8px }
.svc-nav:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none }

/* --- Diğer Hizmetler (yatay kaydırma) --- */
.services-more{margin-top:22px}
.services-more-head{display:flex;align-items:center;justify-content:space-between;margin:8px 0 10px}
.more-controls{display:flex;gap:8px}
.scroll-btn{
  width:38px;height:38px;border-radius:999px;border:1px solid var(--card-border);
  background:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 10px rgba(10,25,35,.06)
}
.scroll-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(10,25,35,.08)}
.services-track-wrap{position:relative;overflow:hidden;border-radius:16px}
.services-track{
  display:flex;gap:16px;overflow-x:auto;padding:6px 4px;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin
}
.services-track::-webkit-scrollbar{height:10px}
.services-track::-webkit-scrollbar-thumb{background:rgba(8,35,45,.16);border-radius:999px}
.services-track > .s-card{scroll-snap-align:start;flex:0 0 clamp(280px, 30vw, 360px)}

/* ========================
   7) INSTAGRAM
   ======================== */
section#insta{padding:30px 0;background:#fff}
.insta-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.insta-head small{display:none}
.insta-track-wrap{overflow:hidden}
.insta-track{display:flex;gap:12px;will-change:transform}
.insta-item{
  flex:0 0 auto;width:160px;height:160px;border-radius:14px;overflow:hidden;position:relative;background:#f6fbfc;
  border:1px solid #e6f1f2;transition:transform .35s, box-shadow .35s, border-color .35s
}
.insta-item img{width:100%;height:100%;object-fit:cover;display:block}
.insta-item.highlight{ transform:scale(1.08); border-color:color-mix(in srgb, var(--accent), #fff 35%); box-shadow:0 14px 30px color-mix(in srgb, var(--brand), #000 75%) }
.insta-item.highlight::after{
  content:"Öne Çıkan"; position:absolute; left:8px; top:8px; background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff; font-size:10px; padding:4px 8px; border-radius:999px; letter-spacing:.3px
}
@media(max-width:768px){.insta-item{width:130px;height:130px}}

/* ========================
   8) GOOGLE REVIEWS
   ======================== */
section#reviews{ position:relative; padding:40px 0; background:linear-gradient(180deg,#f7fbfb 0%, #f3fafb 100%); overflow:hidden }
section#reviews::before{
  content:""; position:absolute; inset:-20%;
  background:radial-gradient(40% 30% at 20% 10%, color-mix(in srgb, var(--brand), #fff 80%), transparent 60%),
             radial-gradient(40% 30% at 80% 90%, color-mix(in srgb, var(--brand2), #fff 80%), transparent 60%);
  animation:reviewsGlow 16s ease-in-out infinite alternate; pointer-events:none;
}
@keyframes reviewsGlow{ 0%{ transform:translateY(-6px) } 100%{ transform:translateY(6px) } }

.review-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px }
.review-card{
  position:relative; background:#fff; border-radius:16px; padding:16px;
  box-shadow:0 6px 14px rgba(0,0,0,.04); isolation:isolate; opacity:0; transform:translateY(8px) scale(.98);
  transition:opacity .5s ease, transform .5s ease; border:1px solid rgba(233,239,240,.9);
}
.review-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent), #fff 40%), color-mix(in srgb, var(--brand), #fff 80%));
  z-index:-1; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding:1px; -webkit-mask-composite:xor; mask-composite:exclude; opacity:.7;
}
.review-card.visible{ opacity:1; transform:none }
.review-card.leaving{ opacity:0; transform:translateY(6px) scale(.985); transition:opacity .35s, transform .35s }
.review-card.entering{ opacity:0; transform:translateY(8px) scale(.98) }
.stars{ display:flex; gap:2px; font-size:18px; line-height:1 }
.stars .s{ color:#f5a800; text-shadow:0 0 2px #f5a80066 }
.review-text{ color:#223; margin:6px 0 0; line-height:1.5 }
.review-author{ font-weight:700; margin-top:10px; color:var(--brand) }
.review-meta{ font-size:12px; color:#6b7a7c; margin-top:2px }
#reviewGrid:hover{ cursor:pause }

/* ========================
   9) BLOG
   ======================== */
section#blog{padding:34px 0;background:#fff}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:960px){.blog-grid{grid-template-columns:1fr}}
.blog-card{background:#fff;border:1px solid var(--card-border);border-radius:16px;overflow:hidden;box-shadow:0 6px 14px rgba(0,0,0,.04)}
.blog-thumb{aspect-ratio:16/9;background:#f2f6f9}
.blog-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.blog-body{padding:14px}
.blog-meta{font-size:12px;color:#667;margin-bottom:6px}
.blog-title{font-weight:700;margin:0 0 6px;font-size:18px;line-height:1.25}
.blog-excerpt{margin:0;color:#233}

/* ========================
   10) YOUTUBE
   ======================== */
section#youtube{padding:34px 0;background:#fff}
.yt-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:768px){.yt-strip{grid-template-columns:1fr}}
.yt-box{aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000}
.yt-box iframe{width:100%;height:100%;border:0;display:block}

/* ========================
   11) FAQ (GENEL)
   ======================== */
section#faq{padding:34px 0;background:#fff}
details.faq{border:1px solid var(--card-border);border-radius:12px;padding:12px;margin-bottom:10px;background:#fbfefe}
details.faq[open]{background:#f5fbfc}
details.faq summary{cursor:pointer;font-weight:700}

/* ========================
   12) FORMS
   ======================== */
.form{display:grid;gap:12px}
.form input,.form select,.form textarea{
  width:100%;height:44px;border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:8px 10px;font:inherit;background:#fff
}
.form textarea{height:auto;min-height:120px}
.form button{justify-self:start}
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.contact-list i{width:20px}

/* ========================
   13) FOOTER
   ======================== */
footer.footer-new{
  background:linear-gradient(135deg,var(--footer-start),var(--footer-end));
  color:#fff; padding:60px 0 0; margin-top:30px
}
.footer-new .footer-container{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px; margin-bottom:40px }
.footer-new h3{ color:#fff; font-size:20px; margin:0 0 20px; position:relative; padding-bottom:10px }
.footer-new h3:after{ content:""; position:absolute; left:0; bottom:0; width:44px; height:3px; background:var(--accent); border-radius:2px }
.footer-new p{ margin:0 0 14px; opacity:.85 }
.footer-links, .footer-contact{ list-style:disc; padding-left:18px; margin:0 }
.footer-links a{ color:#fff; opacity:.85; transition:.25s }
.footer-links a:hover{ opacity:1; color:var(--accent); padding-left:6px }
.footer-contact{ list-style:none; padding-left:0 }
.footer-contact li{ display:flex; gap:10px; align-items:flex-start }
.footer-contact svg{ width:18px; height:18px; flex:0 0 18px; color:var(--accent) }
.footer-contact a, .footer-contact span{ color:#e9f4ff; opacity:.9; text-decoration:none }
.social-links{ display:flex; gap:10px; margin-top:16px }
.social-links a{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.12); color:#fff; transition:.25s }
.social-links a:hover{ background:var(--accent); transform:translateY(-3px) }
.footer-bottom{ background:rgba(0,0,0,.28); padding:18px 0; text-align:center }
.footer-bottom p{ margin:0; opacity:.85; font-size:14px }

/* ========================
   14) DIVIDERS (utility)
   ======================== */
.divider{
  --dv-start: rgb(var(--accent-rgb)/.95);
  --dv-end:   rgb(var(--accent-rgb)/.75);
  width:120px; height:6px; border-radius:999px; display:block;
  background:linear-gradient(90deg,var(--dv-start),var(--dv-end));
  box-shadow:0 1px 0 rgb(0 0 0 / .04) inset, 0 6px 12px rgb(0 0 0 / .06);
}
.divider--soft{ --dv-start: rgb(var(--accent-rgb)/.55); --dv-end: rgb(var(--accent-rgb)/.35); height:5px; box-shadow:0 1px 0 rgb(0 0 0 / .03) inset }
.divider--faint{ --dv-start: rgb(var(--accent-rgb)/.28); --dv-end: rgb(var(--accent-rgb)/.16); height:4px; box-shadow:none }
.divider--sm{ width:88px; height:4px } .divider--md{ width:120px; height:6px } .divider--lg{ width:164px; height:8px }
.divider.is-left{ margin-left:0 } .divider.is-center{ margin-inline:auto } .divider.is-right{ margin-left:auto }
.theme-plumOcean .divider{
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--violet-deep) 92%, #fff 8%),
    color-mix(in srgb, var(--ocean-light) 88%, #fff 12%));
}

/* ========================
   15) DARK UI (opsiyonel)
   ======================== */
body.dark-ui header{ box-shadow:0 6px 18px rgba(0,0,0,.22); background:#0b2a2f; }
body.dark-ui .header-top{ background:#082126; color:#eefbff; }
body.dark-ui .header-main{ background:#0b2a2f; }
body.dark-ui .logo-text h1{ color:#fff; }
body.dark-ui .logo-text span{ color:#cfe8eb; }
body.dark-ui nav a{ color:#e6f7f9; }
body.dark-ui nav a.active{ color:#24c6d5; }
body.dark-ui nav a:hover::after{ background:#24c6d5; }
@media (max-width:992px){
  body.dark-ui nav ul{ background:#0e3338; border-top:1px solid rgba(255,255,255,.15); }
  body.dark-ui .dropdown-content{ background:#0f3a40; border-color:rgba(255,255,255,.16); }
  body.dark-ui .dropdown-content a{ color:#e9f7f9; }
  body.dark-ui .dropdown-content a:hover{ background:rgba(255,255,255,.08); color:#fff; }
}
body.dark-ui .hero{
  background:
    radial-gradient(1400px 700px at 85% -140px, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #071a1d 0%, #0a2a2e 40%, #0a2124 100%),
    linear-gradient(120deg, var(--brand) 0%, var(--brand2) 100%);
  color:#fff;
}
body.dark-ui .hero h1{ color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.18); }
body.dark-ui .hero-sub{ color:#e6f3f5; opacity:.96; }
body.dark-ui .hero-divider{ background:linear-gradient(90deg,#25c7d6,#14b6c6); opacity:1; }
body.dark-ui .hero-cta .btn.primary{
  background:#22a8b9; color:#072026; border:0; box-shadow:0 10px 26px rgba(34,168,185,.35);
}
body.dark-ui .hero-cta .btn.primary:hover{ filter:brightness(.97); transform:translateY(-1px); }
body.dark-ui .hero-cta .btn.ghost{ background:transparent; border:1px solid rgba(255,255,255,.65); color:#fff; }
body.dark-ui .hero-cta .btn.ghost:hover{ background:rgba(255,255,255,.10); }
body.dark-ui .hero .quick-links .q{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  color:#fff; box-shadow:0 10px 24px rgba(0,0,0,.28);
}
body.dark-ui .hero .quick-links .q:hover{ background:rgba(255,255,255,.12); transform:translateY(-3px); }
body.dark-ui .quick-links .icon svg{ color:#fff; opacity:.98; }
body.dark-ui section#services{ background:#fff; }
body.dark-ui footer.footer-new{ color:#eaf4f5; }
body.dark-ui .footer-links a{ color:#d9eef0; }
body.dark-ui .footer-links a:hover{ color:#fff; }

/* ========================
   16) ACCESSIBILITY & MISC
   ======================== */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px }
[role="menu"] a:focus-visible{ background:#eef7f8 }

/* ========================
   17) PRINT TWEAKS
   ======================== */
@media print{
  header, .hero, #insta, #youtube, #reviews, #faq, .footer-new{ display:none!important }
  #services{ padding:0 }
}

/* ========================
   18) TEMA OVERRIDE (plumOcean + SSS)
   ======================== */
.theme-plumOcean .hero.blog-hero{
  background:
    radial-gradient(900px 380px at 50% -120px,
      color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
    linear-gradient(120deg, var(--hero-start) 0%, var(--hero-end) 100%);
  color:#fff;
}
.theme-plumOcean .hero.blog-hero .hero-divider{
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--violet-deep) 92%, #fff 8%),
    color-mix(in srgb, var(--ocean-light) 88%, #fff 12%));
}
.theme-plumOcean .faq-chip.active,
.theme-plumOcean .faq-chip[aria-pressed="true"]{
  background:#f0fbfe; border-color:var(--accent);
}
.theme-plumOcean nav a.active{ color: var(--violet-deep); }
.theme-plumOcean nav a:hover::after{ background: var(--ocean-light); }
.theme-plumOcean .btn.primary{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
}
.theme-plumOcean .btn.primary:hover{
  filter: brightness(.98);
}

/* =========================================================
   THEME PATCH — plumOcean (mor + turkuaz) — EN SONA EKLE
   ========================================================= */
body.theme-plumOcean{
  --violet-deep:#4a138c;
  --ocean-light:#38caea;

  --brand: var(--violet-deep);
  --brand2:#6a0ea1;
  --accent: var(--ocean-light);

  --accent-rgb: 56 202 234; /* #38caea */

  --hero-start: color-mix(in srgb, var(--violet-deep) 88%, #fff 12%);
  --hero-end:   color-mix(in srgb, var(--ocean-light) 88%, #fff 12%);
  --footer-start: var(--violet-deep);
  --footer-end:   var(--ocean-light);

  --link: var(--accent);
  --link-hover: color-mix(in srgb, var(--accent) 90%, #fff 10%);
}
body.theme-plumOcean .header-top{
  background:linear-gradient(90deg, var(--violet-deep), var(--ocean-light)) !important;
  color:#fff !important;
}
body.theme-plumOcean .logo-text h1{ color:var(--brand) !important; }
body.theme-plumOcean .logo-text span{ color:var(--brand2) !important; }
body.theme-plumOcean nav a.active{ color: var(--violet-deep) !important; }
body.theme-plumOcean nav a:hover::after{ background: var(--ocean-light) !important; }
body.theme-plumOcean .hero.blog-hero{
  background:
    radial-gradient(1200px 520px at 75% -160px, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(120deg, var(--hero-start) 0%, var(--hero-end) 100%) !important;
  color:#fff !important;
}
body.theme-plumOcean .hero.blog-hero h1{
  color:#fff !important; text-shadow:0 2px 18px rgba(0,0,0,.22);
}
body.theme-plumOcean .hero.blog-hero .hero-divider{
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--violet-deep) 92%, #fff 8%),
    color-mix(in srgb, var(--ocean-light) 88%, #fff 12%)) !important;
}
body.theme-plumOcean .hero .quick-links .q{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.26) !important;
  color:#fff !important;
  -webkit-backdrop-filter:saturate(120%) blur(2px);
  backdrop-filter:saturate(120%) blur(2px);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}
body.theme-plumOcean .hero .quick-links .q:hover{
  background:rgba(255,255,255,.16) !important;
}
body.theme-plumOcean .quick-links i{ color:#e5fbff !important; }
body.theme-plumOcean .btn{
  border-color: color-mix(in srgb, var(--accent), #000 18%) !important;
  color: var(--brand) !important;
}
body.theme-plumOcean .btn.primary{
  background:linear-gradient(90deg, var(--brand), var(--accent)) !important;
  background-size:200% 100% !important;
  background-position:0% 0% !important;
  color:#fff !important; border:0 !important;
  box-shadow:0 8px 22px rgba(16,179,209,.22) !important;
}
body.theme-plumOcean .btn.primary:hover{
  background-position:100% 0% !important;
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(16,179,209,.28) !important;
}
body.theme-plumOcean .btn.ghost{
  color:#fff !important; border-color:rgba(255,255,255,.65) !important;
  background:transparent !important;
}
body.theme-plumOcean .btn.ghost:hover{
  background:rgba(255,255,255,.12) !important;
}
body.theme-plumOcean .faq-chip{
  border:1px solid color-mix(in srgb,var(--accent),#000 18%) !important;
  background:#fff !important; color:var(--ink) !important;
}
body.theme-plumOcean .faq-chip.active,
body.theme-plumOcean .faq-chip[aria-pressed="true"]{
  background:#f0fbfe !important; border-color:var(--accent) !important;
}
body.theme-plumOcean details.faq{
  background:#fff !important; border:1px solid var(--card-border) !important;
}
body.theme-plumOcean details.faq summary .q .dot{ background:#cfeff6 !important; }
body.theme-plumOcean details.faq[open] summary .q .dot{ background:var(--accent) !important; }
body.theme-plumOcean .linkcopy{ color:#6b7a7c !important; }
body.theme-plumOcean .linkcopy:hover{ color:var(--brand2) !important; }
body.theme-plumOcean .loc-card{ background:#fff !important; border:1px solid var(--card-border) !important; }
body.theme-plumOcean .loc-list li i{ color:var(--accent) !important; }
body.theme-plumOcean .loc-badge{
  background:#e9f4f5 !important; border:1px solid #a8cacc !important; color:#0a4348 !important;
}
body.theme-plumOcean footer.footer-new{
  background:linear-gradient(135deg,var(--footer-start),var(--footer-end)) !important;
  color:#eaffff !important;
}
body.theme-plumOcean .footer-links a,
body.theme-plumOcean .footer-contact a{ color:#eaffff !important; }
body.theme-plumOcean .footer-bottom{ background:rgba(0,0,0,.18) !important; }
/* ==== Hover Kontrast Sabitleme (Elçi Tema) — PATCH ==== */
.btn.primary,
.hero .btn.ghost { color: #fff !important; }
.btn.primary:hover,
.hero .btn.ghost:hover { color: #fff !important; }

/* Koyu header/top şerit üstünde buton metni/ikonları görünür kalsın */
.header-main .btn,
.header-top .btn {
  color: #ffffff !important;
  border-color: transparent;
}

/* Açık zeminli bölümlerde hover'da okunurluk */
.section .btn:hover {
  color: var(--brand) !important;
}

/* Quick-links ikonlarının mor/teal temada görünürlüğü */
.quick-links .q .icon svg { color: var(--icon-ink-hero, #e5fbff); }
/* === ICON BOOST (kartlar + hero hızlı linkler) === */
:root{
  --icon-ink:#073d49;              /* daha koyu teal */
  --icon-ink-hero:#093a44;         /* hero içi */
  --icon-ring: rgba(255,255,255,.22);
}
.s-icon{
  position:relative;
  background: radial-gradient(80% 80% at 30% 20%, #ffffff 0%, #e7f7fa 55%, #d1eef2 100%);
  border:1px solid #cfe8ec;
  box-shadow:
    0 10px 26px rgba(7,61,73,.16),            /* dış gölge */
    inset 0 0 0 1px var(--icon-ring);         /* iç parlak halka */
}
.s-icon svg{ color:var(--icon-ink); filter: drop-shadow(0 1px 0 rgba(255,255,255,.55)) drop-shadow(0 2px 6px rgba(0,0,0,.18)); }
.s-icon svg .i{ stroke-width:2.4 !important; stroke:currentColor !important; }

/* HERO hızlı link kapsülleri */
.hero .quick-links .q{
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.35);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 8px 26px rgba(0,0,0,.12);
}
.hero .quick-links .q:hover{ transform:translateY(-3px); }
.hero .quick-links .icon{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;margin:-8px auto 6px;
  background: radial-gradient(60% 60% at 30% 20%, rgba(255,255,255,.55), rgba(255,255,255,.08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 6px 18px rgba(0,0,0,.18);
}
.hero .quick-links .icon svg,
.hero .quick-links .icon i{ color:#072f38; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }