/* ==========================================================================
   ERGOTERAPISTIMLE - ÖZEL CSS / CUSTOM CSS
   ==========================================================================
   Bu dosya tüm sayfalara EN SON yüklenir.
   İçindeki tüm kurallar Tailwind class'larını override eder (geçer).
   Standart CSS yazabilir, normal selector'lar kullanabilirsin.

   KURAL: Bir Tailwind utility'sini ezmek için satırın sonuna !important ekle.
*/

/* Header logosu — sabit 100px genislik (yukseklik orantili ~90px)
   Logo kesilmesin: ust/alt 10px nefes payi, header buna gore buyur */
.site-header,
.site-header .main-bar,
.site-header .main-bar > .container-fluid { overflow: visible !important; }
.site-header .main-bar > .container-fluid { align-items: center; }
.logo-dark {
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.logo-dark a {
    display: flex !important;
    align-items: center !important;
}
.logo-dark img {
    width: 100px !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
}
@media (max-width: 640px) {
    /* Mobil header barina tasmasin */
    .logo-dark img { width: 72px !important; }
}
/* Sticky (is-fixed) modda da logo AYNI boyutta kalir (bar logoya gore buyur).
   Beyaz zemin header'in kendisine verilir ki logo hicbir durumda tasmasin. */
.sticky-header-wrapper.is-fixed { background: #fff; }
.sticky-header-wrapper.is-fixed .main-bar { background: #fff; height: auto !important; min-height: 0 !important; }

/* Pembe marquee serit yazilari %20 kucuk */
li[class*="after:bg-starsvg-white"] { font-size: 0.8em !important; }

/* Ic sayfa hero dekoratif gorseli: derlenmis Tailwind url'si assets/src/... diye
   yanlis cozuluyordu (404). Dogru koke gore duzeltilmis yol: */
[class*="banner/bg.webp"]::after { background-image: url(../../src/images/banner/bg.webp) !important; }

/* Vizyon/Misyon kartlarindaki pembe serit — daha ince bar */
.vm-icon {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 9999px !important;
    font-size: 16px !important;
}

/* Header menü yazilarini %10 kucult (breakpoint'e gore oransal) */
.navbar-nav a span { font-size: 0.9em; }

/* Dropdown (alt menu) yazilari %20 buyuk: text-sm 14px -> ~17px.
   Ust kuraldaki 0.9em'i ezmek icin alt menuye ozel tanim. */
.navbar-nav .sub-menu a,
.navbar-nav .sub-menu a span { font-size: 16.8px !important; }
/* Uzun isimler tek satirda kalsin diye dropdown genisligi */
@media (min-width: 1024px) {
    .navbar-nav .sub-menu { min-width: 270px; }
}

/* Anasayfa hero: ustuste binen kucuk gorseli %20 saga + %20 asagi kaydir */
.about-image-ergoterapistimle img:last-child { transform: translate(20%, 20%); }

/* Header Randevu butonu kaldirildi -> mobildeki bos CTA barini gizle */
@media (max-width: 640px) {
    .extra-nav { display: none !important; }
}

/* A11y: Sadece screen reader'lar icin gizli label */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Devam:

   ÖRNEKLER (kopyalayıp düzenleyebilirsin):
   --------------------------------------------------------------------------

   1) Slider başlığını büyüt:
   .hero-banner h1 {
       font-size: 48px !important;
       line-height: 1.2 !important;
   }

   2) Buton rengini değiştir:
   .btn-primary {
       background-color: #ff5722 !important;
       color: #ffffff !important;
   }

   3) Tüm sayfa başlık h2'lerini özel yap:
   h2 {
       font-family: 'Playfair Display', serif !important;
       color: #1a1a1a !important;
   }

   4) Sadece anasayfada bir element için:
   .home-page .hizmet-karti {
       border: 2px solid #227675;
   }

   5) Responsive (mobil için ayrı):
   @media (max-width: 768px) {
       .hero-banner h1 {
           font-size: 28px !important;
       }
   }

   --------------------------------------------------------------------------
   AŞAĞIYA KENDİ KURALLARINI YAZ:
   ========================================================================== */


/* ============================================
   Menu: her zaman koyu yazi + siyah yildizlar
   ============================================ */

/* Menu yazilarinin rengi (her zaman koyu) */
.header-nav .navbar-nav > li > a,
.header-nav .navbar-nav > li > a span {
    color: #0a172a !important;
}

/* Menu yildizlari - her zaman siyah/koyu SVG kullan */
.header-nav .navbar-nav > li > a::after {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M6 0L7.69706 4.30294L12 6L7.69706 7.69706L6 12L4.30294 7.69706L0 6L4.30294 4.30294L6 0Z' fill='%230a172a'/></svg>") !important;
}

/* Son menu ogesinden sonra yildiz gosterme (iletisim) */
.header-nav .navbar-nav > li:last-child > a::after {
    display: none !important;
}

/* Hover renkleri - primary */
.header-nav .navbar-nav > li > a:hover,
.header-nav .navbar-nav > li > a:hover span,
.header-nav .navbar-nav > li:hover > a,
.header-nav .navbar-nav > li:hover > a span {
    color: var(--color-primary, #E63B7C) !important;
}

/* ============================================
   Logo: PNG boyutunu header'a dengele
   ============================================ */
.logo-dark img,
.site-header .logo-dark img {
    max-height: 56px;
    width: auto;
    object-fit: contain;
}
.site-header .logo-dark {
    width: auto !important;
    min-width: 0 !important;
}
/* Footer logo da dengeli olsun */
footer img[src*="logo-ergo"] {
    max-width: 180px;
    height: auto;
}

/* ============================================
   Hero baslik boyutu - kullanici ozel istek
   ============================================ */
.hero-title-ergoterapistimle {
    font-size: 33px;
    line-height: 1.15;
    font-weight: 700;
}
@media (min-width: 640px)  { .hero-title-ergoterapistimle { font-size: 38.5px; } }
@media (min-width: 1024px) { .hero-title-ergoterapistimle { font-size: 44px; } }
@media (min-width: 1280px) { .hero-title-ergoterapistimle { font-size: 49.5px; } }
@media (min-width: 1600px) { .hero-title-ergoterapistimle { font-size: 55px; } }

/* ============================================
   Hakkimizda gorsel yukseklik (Tailwind v4 JIT olmadigi icin direkt CSS)
   ============================================ */
.about-image-ergoterapistimle {
    height: 350px !important;
}
@media (min-width: 640px)  { .about-image-ergoterapistimle { height: 400px !important; } }
@media (min-width: 768px)  { .about-image-ergoterapistimle { height: 480px !important; } }
@media (min-width: 1024px) { .about-image-ergoterapistimle { height: 500px !important; } }
@media (min-width: 1280px) { .about-image-ergoterapistimle { height: 520px !important; } }

/* ==========================================================================
   BLOG İÇERİĞİ (Quill editörden çıkan HTML için)
   ========================================================================== */
.blog-content { color: #333; font-size: 16px; line-height: 1.85; }
.blog-content > * { margin-bottom: 1em; }
.blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4, .blog-content h5, .blog-content h6 {
    font-weight: 700; color: #1a1a1a; line-height: 1.3;
    margin-top: 1.5em; margin-bottom: 0.6em;
}
.blog-content h1 { font-size: 2em; }
.blog-content h2 { font-size: 1.6em; }
.blog-content h3 { font-size: 1.35em; }
.blog-content h4 { font-size: 1.15em; }
.blog-content p { margin-bottom: 1em; }
.blog-content strong, .blog-content b { font-weight: 700; color: #1a1a1a; }
.blog-content em, .blog-content i { font-style: italic; }
.blog-content u { text-decoration: underline; }
.blog-content s, .blog-content strike { text-decoration: line-through; }
.blog-content a { color: #E63B7C; text-decoration: underline; }
.blog-content a:hover { color: #c12667; }

/* Sıralı / sırasız listeler */
.blog-content ul,
.blog-content ol {
    margin: 0.8em 0 1.2em 0;
    padding-left: 2em;
    list-style-position: outside;
}
.blog-content ul { list-style-type: disc; }
.blog-content ol { list-style-type: decimal; }
.blog-content ul ul,
.blog-content ol ol,
.blog-content ul ol,
.blog-content ol ul { margin: 0.4em 0 0.4em 0; }
.blog-content li { margin-bottom: 0.4em; padding-left: 0.25em; }
.blog-content li > p { margin-bottom: 0.5em; }

/* Blockquote — beyaz arka plan, sol ince pembe çizgi, sağda flaticon tırnak ikonu */
.blog-content blockquote {
    position: relative;
    background: #fff;
    border: 0;
    border-radius: 16px;
    padding: 28px 90px 28px 36px;
    margin: 1.8em 0;
    font-style: italic;
    font-size: 1.05em;
    line-height: 1.7;
    color: #1a1a1a;
    box-shadow: 0 4px 18px rgba(230, 59, 124, 0.06);
}
.blog-content blockquote::before {
    /* flaticon-right-quote ile aynı PUA karakter */
    content: "\f105";
    font-family: "flaticon" !important;
    font-style: normal;
    font-weight: 400;
    speak: none;
    position: absolute;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    font-size: 56px;
    line-height: 1;
    color: #E63B7C;
    pointer-events: none;
}
.blog-content blockquote::after {
    content: '';
    position: absolute;
    left: 14px;
    top: 22%;
    bottom: 22%;
    width: 4px;
    background: #E63B7C;
    border-radius: 4px;
}
.blog-content blockquote p { margin: 0; position: relative; z-index: 1; font-weight: 500; }
.blog-content blockquote p + p { margin-top: 0.6em; }
.blog-content blockquote cite {
    display: block;
    margin-top: 14px;
    font-style: normal;
    font-size: 0.9em;
    font-weight: 600;
    color: #E63B7C;
    position: relative;
    z-index: 1;
}
.blog-content blockquote cite::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 2px;
    background: #E63B7C;
    vertical-align: middle;
    margin-right: 10px;
}

/* Kod */
.blog-content code,
.blog-content pre {
    background: #f7f4f0;
    border: 1px solid #e6e2dc;
    border-radius: 6px;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 0.9em;
}
.blog-content code { padding: 2px 6px; }
.blog-content pre { padding: 14px 18px; overflow-x: auto; }
.blog-content pre code { background: transparent; border: 0; padding: 0; }

/* Görseller */
.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 1em 0;
}

/* Quill text-align desteği (toolbar'da align varsa) */
.blog-content .ql-align-center { text-align: center; }
.blog-content .ql-align-right  { text-align: right; }
.blog-content .ql-align-justify{ text-align: justify; }

/* HR */
.blog-content hr {
    border: 0;
    border-top: 1px solid #e6e2dc;
    margin: 2em 0;
}

/* ==========================================================================
   HEADER İLETİŞİM — Her zaman sabit renkler (logo pembesi + siyah)
   ========================================================================== */
/* "İletişim" üst yazısı her zaman logo pembesi */
.site-header .widget-content h6.text-primary,
.site-header .widget-content h6 {
    color: #E63B7C !important;
}
/* Telefon numarası her zaman siyah (sticky veya değil) */
.site-header .widget-content a[href^="https://wa.me/"],
.site-header .widget-content a[href^="tel:"] {
    color: #1a1a1a !important;
}

/* Header iletişim telefon ikonu her zaman siyah */
.site-header .widget-media i,
.site-header .widget-media .feather {
    color: #1a1a1a !important;
}

/* Pagination linkleri smooth-scroller'a takilmasin */
.blog-pagination-links a {
    position: relative;
    z-index: 10;
}

/* Quill renk class'lari frontend desteği */
.blog-content .ql-color-white  { color: #fff; }
.blog-content .ql-color-red    { color: #e60000; }
.blog-content .ql-color-orange { color: #f90; }
.blog-content .ql-color-yellow { color: #ff0; }
.blog-content .ql-color-green  { color: #008a00; }
.blog-content .ql-color-blue   { color: #06c; }
.blog-content .ql-color-purple { color: #93f; }
.blog-content .ql-bg-black  { background-color: #000; color: #fff; padding: 0 4px; border-radius: 3px; }
.blog-content .ql-bg-red    { background-color: #fee2e2; padding: 0 4px; border-radius: 3px; }
.blog-content .ql-bg-orange { background-color: #fed7aa; padding: 0 4px; border-radius: 3px; }
.blog-content .ql-bg-yellow { background-color: #fef9c3; padding: 0 4px; border-radius: 3px; }
.blog-content .ql-bg-green  { background-color: #dcfce7; padding: 0 4px; border-radius: 3px; }
.blog-content .ql-bg-blue   { background-color: #dbeafe; padding: 0 4px; border-radius: 3px; }
.blog-content .ql-bg-purple { background-color: #ede9fe; padding: 0 4px; border-radius: 3px; }

/* Quill <p> wrapping fix - Renkler kullanıcının seçtiği gibi devralınsın */
.hero-subtitle-content > p { margin: 0; color: inherit; }
.hero-subtitle-content > p + p { margin-top: 0.5em; }
.hero-subtitle-content strong { color: inherit; font-weight: 700; }

/* Genel content block'lar (DB'den HTML gelen tüm yerler) */
[class*="text-white"] > p { color: inherit; }
[class*="text-white"] > p > * { color: inherit; }

/* Anasayfa blog thumb swiper
   NOT: Slide'lara CSS margin VERME — Swiper dikey modda yukseklikleri kendisi
   hesaplar, margin eklemek kartlari asagi iter ve son kart kesilir.
   Kart araligi dz.carousel.js icindeki spaceBetween: 25 ile veriliyor. */

/* Tum kartlarda sabit ic bosluk (aktifken boyut ziplamasin) */
.blog-vertical-swiper-thumb2 .swiper-slide > div {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* Gorsel sarici: kart yuksekligini doldur, portre kapak gorselleri tasmasin */
.blog-vertical-swiper-thumb2 .home-thumb-media {
    height: 100%;
    max-height: 100%;
}
.blog-vertical-swiper-thumb2 .home-thumb-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 767px) {
    /* Mobilde kart dikey akista — gorsele sabit yukseklik */
    .blog-vertical-swiper-thumb2 .home-thumb-media { height: 200px; max-height: 200px; }
}

/* Blog detay kapak görseli - mouse hover parlama efekti */
.blog-cover-shine { transition: box-shadow .4s ease; }
.blog-cover-shine:hover {
    box-shadow: 0 12px 32px rgba(230, 59, 124, 0.25);
}
.blog-cover-shine::before {
    background: linear-gradient(
        to right,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.6) 50%,
        rgba(255,255,255,0) 100%
    ) !important;
    pointer-events: none;
}
@keyframes blogCoverShine {
    0%   { left: -75%; }
    100% { left: 125%; }
}
.blog-cover-shine:hover::before {
    animation: blogCoverShine 0.85s ease-out forwards;
}

/* Anasayfa hizmet sekmesi: karttaki yuvarlak ok butonu gizli (sayfa linki kart basligina tasindi) */
.tab-content-area .tab-content a.btn-square {
    display: none !important;
}

/* Footer iletisim seridi: e-posta dar ekranda kirpilmasin, alt satira kirilsin */
footer a[href^="mailto:"] {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    display: inline-block;
    max-width: 100%;
}

/* Kayan pembe serit: kesintisiz dongu.
   Icerik 6 ozdes setten olusur; -50% (tam 3 set) kaydirilinca basa sarar.
   -50% kesin bir oran oldugu icin sarma aninda piksel atlamasi olmaz (eski -16.6667% yuvarlama hatasi veriyordu). */
@keyframes ergoTickerLoop {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}
ul.animate-ticker {
    animation: ergoTickerLoop 45s linear infinite !important;
    width: max-content;
    will-change: transform;
}

/* Yardim kutusu (hizmet sayfasi kenar cubugu): e-posta dar kartta tasmasin,
   ortali kalarak alt satira kirilsin */
.widget-content a[href^="mailto:"] {
    overflow-wrap: anywhere;
    word-break: break-word;
    display: inline-block;
    max-width: 100%;
}

/* Tum Hizmetler kenar menusu: uzun basliklar sag taraftaki okun altina girmesin */
#services-sidebar-list a {
    padding-right: 44px;
}

/* Tum e-posta linkleri: dar alanda kirpilmak yerine alt satira kirilsin (site geneli) */
a[href^="mailto:"] {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Hizmetler sayfasi: kare (1:1) hizmet gorselleri */
.hizmet-kare-gorsel {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    display: block;
}

/* SSS alt CTA: gorsel sol yarimi tamamen kaplasin (kesik kenar olmasin) */
.sss-cta-gorsel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Footer iletisim seridi: e-posta sutunu (3. sutun) %12.5 daha genis,
   kalan uc sutun esit. (Sutun sirasi degisirse nth-child guncellenmeli) */
@media (min-width: 1280px) {
    .footer-middle .row > div { width: 23.9583% !important; }
    .footer-middle .row > div:nth-child(2) { width: 20.9583% !important; }
    .footer-middle .row > div:nth-child(3) { width: 28.125% !important; }
    .footer-middle .row > div:nth-child(4) { width: 26.9583% !important; }
}


/* ============================================
   Mobil duzeltmeler (2026-07-20)
   ============================================ */

/* 1) Mobil menu (cekmece) icindeki logo menunun ustune tasiyordu (lg breakpoint = 992px) */
@media (max-width: 991.98px) {
    .header-nav > div:first-child {
        height: auto !important;
        padding-top: 14px;
        padding-bottom: 10px;
    }
    .header-nav > div:first-child img {
        max-height: 52px;
        width: auto;
        object-fit: contain;
    }
}

/* 2) Iletisim sayfasi hero basligi mobilde headerin altina giriyordu */
@media (max-width: 767.98px) {
    .iletisim-hero-hucre {
        padding-top: 90px !important;
    }
}

/* 3) Ana sayfa slider: mobilde asagi genisletildi, gorsel sola kaydirildi ki yazi cocugun yuzune gelmesin */
@media (max-width: 767.98px) {
    .ana-slider {
        min-height: min(145vw, 550px);
        background-position: 35% center !important;
    }
    /* Yazi ile arka plan gorseli arasina %50 seffaf siyah katman (okunabilirlik) */
    .ana-slider::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 0;
        pointer-events: none;
    }
}

/* 5) Randevu sayfasi: foto, form karti ile ayni yukseklikte ve ayni hizada olsun (xl ve ustu) */
@media (min-width: 1280px) {
    .randevu-satir { align-items: stretch !important; }
    .randevu-foto-sarici { height: 100%; }
    /* Foto akistan cikarilir ki satir yuksekligini form karti belirlesin */
    .randevu-foto-sarici > div:first-child {
        position: absolute;
        inset: 0;
    }
    .randevu-foto-sarici > div:first-child img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    /* Form kolonundaki alt bosluklar esitligi bozmasin */
    .randevu-form-kolon { margin-bottom: 0 !important; }
    .randevu-form-karti { margin-bottom: 0 !important; }
}

/* Randevu sayfasi rozeti: %15 daha genis (320px -> 368px) */
.randevu-rozet { width: min(368px, 85%) !important; }

/* Randevu bolumu ile footer arasinda 50px bosluk (xl'de kart marginleri sifirlandigi icin) */
@media (min-width: 1280px) {
    .randevu-bolum { margin-bottom: 50px; }
}

/* 6) Ana sayfa hizmet kartlari "Randevu Al" butonu mobilde logo pembesi olsun (beyaz dikkat cekmiyordu) */
@media (max-width: 767.98px) {
    .tab-content-area a.btn-white {
        background-color: #E63B7C !important;
        border-color: #E63B7C !important;
        color: #fff !important;
    }
}

/* 4) Mobil cekmece alt menu yazilari ana menu ile ayni boyutta olsun (16.8px cok buyuktu)
   Not: link icindeki <span> ayri bir kuraldan 16.8px aliyor, o yuzden span da hedefleniyor. */
@media (max-width: 991.98px) {
    .header-nav .sub-menu li a,
    .header-nav .sub-menu li a span {
        font-size: 13.5px !important;
        line-height: 1.7;
    }
}
/* ============================================
   Blog yazisi: bilgilendirme notu (M-07)
   ============================================ */
.blog-bilgi-notu {
    background: #f3efe8;
    border-left: 4px solid #E63B7C;
    line-height: 1.7;
}

/* ============================================
   Zengin metin (editörden gelen) başlık hiyerarşisi
   --------------------------------------------
   Tailwind'in temel sıfırlaması h1-h6'ya "font-size: inherit" veriyor;
   bu yüzden editörde H2/H3/H4 seçilse bile hepsi aynı boyutta görünüyordu.
   Yalnızca SINIFI OLMAYAN başlıklar hedeflenir — şablondaki
   (Tailwind sınıflı) başlıklar etkilenmez.
   ============================================ */
.single-inner h2:not([class]) {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    line-height: 1.3;
    margin: 1.6em 0 .6em;
}
.single-inner h3:not([class]) {
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 700;
    line-height: 1.35;
    margin: 1.4em 0 .5em;
}
.single-inner h4:not([class]) {
    font-size: clamp(18px, 1.7vw, 20px);
    font-weight: 600;
    line-height: 1.4;
    margin: 1.3em 0 .45em;
}
.single-inner h5:not([class]) {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    margin: 1.2em 0 .4em;
}
/* ============================================
   ERİŞİLEBİLİRLİK — RENK KONTRASTI (WCAG 2.1 AA)
   --------------------------------------------
   Marka pembesi #E63B7C beyaz üzerinde 3.98:1 veriyor; küçük yazı için
   gereken eşik 4.5:1. Büyük yazı eşiği (3:1) ise zaten sağlanıyor.
   Bu yüzden pembe TAMAMEN değiştirilmiyor:
     - küçük pembe yazı      -> #C13268 (tüm açık zeminlerde >= 4.5:1)
     - beyaz yazı taşıyan
       pembe zeminler        -> #D63773 (beyazla 4.51:1)
     - büyük başlıklar,
       ikonlar, kenarlıklar  -> #E63B7C (marka rengi korunur)
   ============================================ */
:root {
    --pembe-metin: #C13268;   /* küçük yazı */
    --pembe-zemin: #D63773;   /* üzerinde beyaz yazı olan alanlar */
}

/* Küçük pembe yazılar */
.text-primary { color: var(--pembe-metin); }

/* Büyük yazıda marka pembesi korunur — 3:1 eşiği zaten karşılanıyor */
h1.text-primary,
h2.text-primary,
.text-primary.text-2xl,
.text-primary.text-2xxl,
.text-primary.text-3xl,
.text-primary.text-3xxl,
.text-primary.text-4xxl { color: #E63B7C; }

/* Beyaz yazı taşıyan pembe zeminler */
.bg-primary,
.btn-primary { background-color: var(--pembe-zemin); border-color: var(--pembe-zemin); }

/* Künye kartı etiketleri küçük yazı */
.hizmet-kunye-satir dt { color: var(--pembe-metin); }

/* ============================================
   HİZMET KÜNYESİ — "Uygulama Bilgileri" kartı
   --------------------------------------------
   Özetin hemen ardında duran, etiket/değer çiftlerinden oluşan
   bilgilendirme kartı. dl/dt/dd kullanıldığı için arama motorları
   ve yapay zeka taramaları alanları ayrı ayrı okuyabilir.
   ============================================ */
.hizmet-kunye {
    background: #fff;
    border: 1px solid #f0e7ea;
    border-radius: 16px;
    box-shadow: 0 6px 28px rgba(70, 40, 55, .07);
    padding: 1.75rem 1.9rem;
    margin: 0 0 2.25rem;
}
.hizmet-kunye-baslik {
    font-size: clamp(18px, 1.7vw, 20px);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 1.15rem;
    padding-bottom: .85rem;
    border-bottom: 2px solid #E63B7C;
    color: #2c2724;
}
.hizmet-kunye-liste { margin: 0; }
.hizmet-kunye-satir {
    display: grid;
    grid-template-columns: 12.5rem 1fr;
    gap: .35rem 1.5rem;
    padding: .8rem 0;
    border-bottom: 1px solid #f4eef0;
}
.hizmet-kunye-satir:last-child { border-bottom: 0; padding-bottom: 0; }
.hizmet-kunye-satir dt {
    font-size: 15px;
    font-weight: 700;
    color: #E63B7C;
    line-height: 1.5;
    margin: 0;
}
.hizmet-kunye-satir dd {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: #4a4441;
    margin: 0;
}
/* Dar ekranda etiket, değerin üstüne geçer */
@media (max-width: 767px) {
    .hizmet-kunye { padding: 1.35rem 1.25rem; border-radius: 14px; }
    .hizmet-kunye-satir { grid-template-columns: 1fr; gap: .3rem; padding: .7rem 0; }
    .hizmet-kunye-satir dd { font-size: 15px; }
}

/* Hizmet sayfası özeti — kapak görselinin hemen altındaki 3-5 cümle.
   Sayfanın ilk metni olduğu için gövdeden bir tık öne çıkar; yapay zeka
   taramalarının ve hızlı okuyan ziyaretçinin konuyu ilk kavradığı yer. */
.hizmet-ozet p {
    font-size: clamp(17px, 1.6vw, 19px);
    line-height: 1.72;
    color: #3d3a36;
    margin-bottom: .9em;
}
.hizmet-ozet p:last-child { margin-bottom: 0; }
.hizmet-ozet {
    border-left: 4px solid #E63B7C;
    padding: .2em 0 .2em 1.15rem;
}
@media (max-width: 575px) {
    .hizmet-ozet { padding-left: .9rem; }
}

/* Şablondaki bölüm başlıkları (Faydaları, günlük yaşam, SSS) içerik
   H2 standardıyla birebir aynı boyutta olsun. Bu başlıkların Tailwind
   sınıfları olduğu için yukarıdaki :not([class]) kuralları onları atlıyordu. */
.single-inner h2.bolum-basligi {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    line-height: 1.3;
}

/* İlk başlık üstte fazladan boşluk yapmasın */
.single-inner h2:not([class]):first-child,
.single-inner h3:not([class]):first-child { margin-top: 0; }

/* Editörden gelen alıntı bloğu */
.single-inner blockquote:not([class]) {
    border-left: 4px solid #E63B7C;
    background: #faf8f5;
    margin: 1.4em 0;
    padding: 14px 18px;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #444;
}