/* =========================================================
   ÖZSAL TEKNİK — ANASAYFA İÇERİK BLOKLARI
   (Hizmetlerimiz / Bölgesel Hizmetler / Arıza Kodları)

   Bu blok "Güvenilir Kombi & Klima Servisiniz" (Hero/CTA, #ozh-hero-cta)
   bölümünün HEMEN ALTINA, aralarında 130px boşlukla eklenir. Eski
   "Our Case Studies" ve "Why choose Us? / We serve a wide variety of
   industries" bölümlerinin YERİNE geçer (bkz. functions.php içindeki
   ozsal_replace_legacy_case_studies_and_industries_sections()).
   ========================================================= */

#oz-root, #oz-root *{ box-sizing:border-box; }

/* Hero/CTA ile bu blok arasındaki boşluk: masaüstünde tam 130px,
   dar ekranlarda orantılı olarak daralır (premium mobil deneyim
   için aşırı büyük boşluk bırakılmaz). */
#oz-root{
  margin-top:130px;
}
@media (max-width:900px){
  #oz-root{ margin-top:96px; }
}
@media (max-width:600px){
  #oz-root{ margin-top:64px; }
}
@media (max-width:380px){
  #oz-root{ margin-top:52px; }
}

  #oz-root, #oz-root *{ box-sizing:border-box; }

  #oz-root{
    --ink:#101E2C;
    --ink-soft:#4B5C6B;
    --paper:#F6F8FA;
    --paper-alt:#EEF3F6;
    --white:#FFFFFF;
    --line:rgba(16,32,46,.09);
    --line-strong:rgba(16,32,46,.14);

    --flame:#E1541F;
    --flame-dark:#B23F16;
    --flame-soft:#FCEAE3;
    --flame-soft2:#FBDFD3;

    --frost:#0B7C86;
    --frost-dark:#075B63;
    --frost-soft:#E2F3F3;
    --frost-soft2:#D3EDEE;

    --navy:#0E1B29;
    --navy-2:#132537;
    --navy-line:rgba(255,255,255,.10);

    --radius-lg:22px;
    --radius-md:16px;
    --radius-sm:11px;

    --ease:cubic-bezier(.22,1,.36,1);

    font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    /* NOT: overflow-x:hidden buraya BİLEREK konmuyor. Aşağıdaki
       "tam genişlik arkaplan" kuralı, bu bölümün içine eklendiği
       sayfanın (Elementor/tema) daraltılmış/ortalanmış içerik
       kutusundan taşıp ekranın tam genişliğine yayılmasını sağlar;
       #oz-root üzerinde overflow-x:hidden olsaydı bu taşmaburada
       kesilir ve arkaplanlar yine dar görünürdü. */
  }

  /* =========================================================
     TAM GENİŞLİK ARKAPLAN (full-bleed)
     Bu blok, temanın ortalanmış/daraltılmış içerik kutusunun
     İÇİNE eklendiği için normalde section arkaplanları o dar
     kutuyla sınırlı kalır. Aşağıdaki kural, her section'ı içinde
     bulunduğu kutudan bağımsız olarak ekranın tam genişliğine
     yayar; section içindeki .oz-wrap zaten kendi max-width'iyle
     içeriği ortada tutar, yalnızca ARKAPLAN tam genişlik olur.
     ========================================================= */
  #oz-root > section{
    width:100vw;
    max-width:100vw;
    left:50%;
    right:50%;
    margin-left:-50vw;
    margin-right:-50vw;
  }

  #oz-root h1,#oz-root h2,#oz-root h3,#oz-root h4{
    font-family:'Manrope',Inter,sans-serif;
    color:var(--ink);
    margin:0;
    line-height:1.18;
  }
  #oz-root p{ margin:0; }
  #oz-root a{ text-decoration:none; color:inherit; }
  #oz-root a:visited{ color:inherit; }
  #oz-root .oz-card:focus-visible,
  #oz-root .oz-region-card:focus-visible,
  #oz-root .oz-code-card:focus-visible,
  #oz-root .oz-btn-outline:focus-visible{
    outline:2px solid var(--flame);
    outline-offset:3px;
  }
  #oz-root ul{ list-style:none; margin:0; padding:0; }
  #oz-root img{ max-width:100%; display:block; }
  #oz-root button{ font-family:inherit; cursor:pointer; }

  #oz-root .oz-wrap{
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
  }

  #oz-root section{ padding:76px 0; position:relative; }

  /* ---------- Section headings ---------- */
  #oz-root .oz-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:32px;
    margin-bottom:44px;
    flex-wrap:wrap;
  }
  #oz-root .oz-head-text{ max-width:640px; }
  #oz-root .oz-head h2{
    font-size:clamp(26px,3vw,36px);
    font-weight:800;
    letter-spacing:-0.01em;
  }
  #oz-root .oz-head p{
    margin-top:12px;
    color:var(--ink-soft);
    font-size:16px;
    line-height:1.65;
    max-width:60ch;
  }
  #oz-root .oz-head-text .oz-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13.5px;
    font-weight:700;
    color:var(--flame);
    margin-bottom:10px;
  }
  #oz-root .oz-kicker svg{ width:16px; height:16px; }

  /* =========================================================
     1) HİZMETLERİMİZ
     ========================================================= */
  #oz-root .oz-services{ background:var(--paper); }

  #oz-root .oz-group{ margin-top:14px; }
  #oz-root .oz-group + .oz-group{ margin-top:52px; }

  #oz-root .oz-group-title{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:24px;
  }
  #oz-root .oz-group-title .oz-gicon{
    width:38px; height:38px;
    border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    flex:none;
  }
  #oz-root .oz-group-title.oz-warm .oz-gicon{ background:var(--flame-soft); color:var(--flame); }
  #oz-root .oz-group-title.oz-cool .oz-gicon{ background:var(--frost-soft); color:var(--frost); }
  #oz-root .oz-group-title .oz-gicon svg{ width:20px; height:20px; }
  #oz-root .oz-group-title h3{ font-size:20px; font-weight:800; }
  #oz-root .oz-group-title span{
    color:var(--ink-soft);
    font-size:14px;
    margin-left:4px;
    font-weight:500;
  }

  #oz-root .oz-card-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
  }

  #oz-root .oz-card{
    position:relative;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:transform .5s var(--ease), border-color .4s var(--ease), box-shadow .5s var(--ease);
    will-change:transform;
  }
  #oz-root .oz-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 38px -22px rgba(16,32,46,.28);
  }
  #oz-root .oz-card.oz-warm:hover{ border-color:rgba(225,84,31,.35); }
  #oz-root .oz-card.oz-cool:hover{ border-color:rgba(11,124,134,.35); }

  #oz-root .oz-card-media{
    position:relative;
    aspect-ratio:16/11;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  #oz-root .oz-card.oz-warm .oz-card-media{
    background:
      radial-gradient(120% 140% at 85% -10%, rgba(255,255,255,.35), transparent 55%),
      linear-gradient(135deg,#F0703A 0%,#D5451C 60%,#A7350F 100%);
  }
  #oz-root .oz-card.oz-cool .oz-card-media{
    background:
      radial-gradient(120% 140% at 85% -10%, rgba(255,255,255,.35), transparent 55%),
      linear-gradient(135deg,#149AA0 0%,#0B7C86 58%,#064D53 100%);
  }
  #oz-root .oz-card-media::before{
    content:"";
    position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.4px);
    background-size:16px 16px;
    opacity:.5;
  }
  #oz-root .oz-card-media::after{
    content:"";
    position:absolute;
    width:150%; height:150%;
    top:-25%; left:-60%;
    background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.22) 48%, transparent 56%);
    transform:translateX(-15%);
    transition:transform .9s var(--ease);
  }
  #oz-root .oz-card:hover .oz-card-media::after{ transform:translateX(55%); }

  /* Gerçek fotoğraf kullanılan kartlar (Kombi Bakımı, Petek Temizliği,
     Klima Bakımı): dekoratif renkli gradyanı, nokta desenini, ışık
     kayması efektini ve ortadaki ikon rozetini kaldır; görsel alanında
     yalnızca FOTOĞRAF görünsün. */
  #oz-root .oz-card-media.oz-has-photo{
    background:var(--paper-alt);
  }
  #oz-root .oz-card-media.oz-has-photo::before,
  #oz-root .oz-card-media.oz-has-photo::after{
    content:none;
    display:none;
  }
  #oz-root .oz-card-media.oz-has-photo .oz-card-icon{
    display:none;
  }

  #oz-root .oz-card-icon{
    position:relative;
    z-index:1;
    width:64px; height:64px;
    border-radius:16px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.32);
    backdrop-filter:blur(2px);
    display:flex; align-items:center; justify-content:center;
    transition:transform .55s var(--ease), background .4s var(--ease);
  }
  #oz-root .oz-card-icon svg{ width:30px; height:30px; color:#fff; }
  #oz-root .oz-card:hover .oz-card-icon{
    transform:scale(1.1) rotate(-6deg);
    background:rgba(255,255,255,.26);
  }

  #oz-root .oz-card-tag{
    position:absolute; top:14px; left:14px; z-index:1;
    font-size:11.5px; font-weight:700; letter-spacing:.02em;
    color:#fff; background:rgba(12,18,26,.28);
    border:1px solid rgba(255,255,255,.28);
    padding:5px 10px; border-radius:100px;
  }

  #oz-root .oz-card-body{
    padding:20px 20px 22px;
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1;
  }
  #oz-root .oz-card-body h4{
    font-size:17px; font-weight:800; letter-spacing:-.01em;
    text-decoration:underline; text-decoration-color:transparent;
    text-underline-offset:3px;
    transition:text-decoration-color .3s var(--ease);
  }
  #oz-root .oz-card:hover .oz-card-body h4,
  #oz-root .oz-card:focus-visible .oz-card-body h4{
    text-decoration-color:currentColor;
  }
  #oz-root .oz-card-body p{
    color:var(--ink-soft);
    font-size:14.2px;
    line-height:1.62;
    flex:1;
  }

  #oz-root .oz-more{
    margin-top:6px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:14px;
    font-weight:700;
    width:fit-content;
  }
  #oz-root .oz-card.oz-warm .oz-more{ color:var(--flame-dark); }
  #oz-root .oz-card.oz-cool .oz-more{ color:var(--frost-dark); }
  #oz-root .oz-more svg{
    width:15px; height:15px;
    transition:transform .35s var(--ease);
  }
  #oz-root .oz-card:hover .oz-more svg{ transform:translateX(5px); }
  #oz-root .oz-more::after{
    content:"";
    position:absolute;
  }

  /* =========================================================
     2) BÖLGESEL HİZMETLER — carousel
     ========================================================= */
  #oz-root .oz-regions{
    background:var(--paper-alt);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }

  #oz-root .oz-carousel-controls{ display:flex !important; gap:10px; }
  /* Carousel ok butonları: temanın genel buton/ikon sıfırlamalarıyla
     (button, a.button, svg vb.) çakışmaması için kritik kurallar
     !important ile sabitlenir; aksi halde buton oval görünüp ok
     ikonu tamamen kaybolabiliyordu. */
  #oz-root .oz-cbtn{
    box-sizing:border-box !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    max-width:44px !important;
    max-height:44px !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:50% !important;
    border:1px solid var(--line-strong) !important;
    background-color:var(--white) !important;
    background-image:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:var(--ink) !important;
    line-height:1 !important;
    font-size:0 !important;
    text-indent:0 !important;
    overflow:visible !important;
    transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .25s var(--ease);
    flex:0 0 44px !important;
  }
  #oz-root .oz-cbtn svg{
    display:block !important;
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    min-height:18px !important;
    flex:none !important;
    fill:none !important;
    stroke:currentColor !important;
    color:currentColor !important;
    overflow:visible !important;
    pointer-events:none !important;
  }
  #oz-root .oz-cbtn svg path{
    stroke:currentColor !important;
    fill:none !important;
  }
  #oz-root .oz-cbtn:hover{ background-color:var(--flame) !important; border-color:var(--flame) !important; color:#fff !important; transform:translateY(-2px); }
  #oz-root .oz-cbtn:active{ transform:translateY(0); }
  #oz-root .oz-cbtn:disabled{ opacity:.35 !important; pointer-events:none !important; }
  #oz-root .oz-cbtn:focus-visible{ outline:2px solid var(--flame); outline-offset:2px; }

  #oz-root .oz-track-wrap{ position:relative; }
  #oz-root .oz-track-wrap::before,
  #oz-root .oz-track-wrap::after{
    content:"";
    position:absolute; top:0; bottom:0;
    width:56px; z-index:2; pointer-events:none;
  }
  #oz-root .oz-track-wrap::before{ left:0; background:linear-gradient(90deg,var(--paper-alt),transparent); }
  #oz-root .oz-track-wrap::after{ right:0; background:linear-gradient(-90deg,var(--paper-alt),transparent); }

  #oz-root .oz-track{
    display:flex;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    padding:4px 4px 14px;
    scrollbar-width:none;
  }
  #oz-root .oz-track::-webkit-scrollbar{ display:none; }

  #oz-root .oz-region-card{
    scroll-snap-align:start;
    flex:0 0 auto;
    width:222px;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:22px 18px;
    display:flex;
    flex-direction:column;
    gap:14px;
    transition:border-color .35s var(--ease), transform .4s var(--ease), background .35s var(--ease);
  }
  #oz-root .oz-region-card:hover{
    transform:translateY(-4px);
    border-color:rgba(225,84,31,.4);
    background:linear-gradient(180deg,#fff, var(--flame-soft) 220%);
  }
  #oz-root .oz-region-pin{
    width:42px; height:42px;
    border-radius:12px;
    background:var(--flame-soft);
    color:var(--flame);
    display:flex; align-items:center; justify-content:center;
    transition:transform .45s var(--ease), background .35s var(--ease), color .35s var(--ease);
  }
  #oz-root .oz-region-pin svg{ width:20px; height:20px; }
  #oz-root .oz-region-card:hover .oz-region-pin{
    background:var(--flame); color:#fff;
    transform:translateY(-3px) rotate(-8deg);
  }
  #oz-root .oz-region-card h4{
    font-size:16.5px; font-weight:800;
    text-decoration:underline; text-decoration-color:transparent;
    text-underline-offset:3px;
    transition:text-decoration-color .3s var(--ease);
  }
  #oz-root .oz-region-card:hover h4,
  #oz-root .oz-region-card:focus-visible h4{
    text-decoration-color:currentColor;
  }
  #oz-root .oz-region-card p{ font-size:13px; color:var(--ink-soft); line-height:1.5; }
  #oz-root .oz-region-card .oz-more{ font-size:13px; }

  #oz-root .oz-regions-foot{
    margin-top:30px;
    display:flex; align-items:center; justify-content:center;
  }
  #oz-root .oz-btn-outline{
    display:inline-flex; align-items:center; gap:9px;
    padding:13px 26px;
    border-radius:100px;
    border:1.5px solid var(--line-strong);
    background:var(--white);
    font-weight:700; font-size:14.5px;
    color:var(--ink);
    transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
  }
  #oz-root .oz-btn-outline svg{ width:16px; height:16px; transition:transform .35s var(--ease); }
  #oz-root .oz-btn-outline:hover{
    border-color:var(--flame); color:var(--flame-dark);
    background:var(--flame-soft); transform:translateY(-2px);
  }
  #oz-root .oz-btn-outline:hover svg{ transform:translateX(4px); }

  /* =========================================================
     3) ARIZA KODLARI — dark carousel
     ========================================================= */
  #oz-root .oz-codes{
    background:
      radial-gradient(900px 420px at 12% -10%, rgba(225,84,31,.16), transparent 60%),
      radial-gradient(900px 420px at 100% 110%, rgba(11,124,134,.20), transparent 60%),
      var(--navy);
    color:#fff;
  }
  #oz-root .oz-codes .oz-head-text .oz-kicker{ color:#FF9466; }
  #oz-root .oz-codes .oz-head h2{ color:#fff; }
  #oz-root .oz-codes .oz-head p{ color:rgba(255,255,255,.62); }

  #oz-root .oz-codes .oz-track-wrap::before{ background:linear-gradient(90deg, var(--navy), transparent); }
  #oz-root .oz-codes .oz-track-wrap::after{ background:linear-gradient(-90deg, var(--navy), transparent); }

  #oz-root .oz-codes .oz-cbtn{
    background-color:rgba(255,255,255,.06) !important;
    border-color:var(--navy-line) !important;
    color:#fff !important;
  }
  #oz-root .oz-codes .oz-cbtn:hover{ background-color:#fff !important; border-color:#fff !important; color:var(--navy) !important; }

  #oz-root .oz-code-card{
    scroll-snap-align:start;
    flex:0 0 auto;
    width:250px;
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border:1px solid var(--navy-line);
    border-radius:var(--radius-md);
    padding:24px 20px;
    display:flex;
    flex-direction:column;
    gap:14px;
    transition:border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
  }
  #oz-root .oz-code-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,148,102,.55);
    background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  }
  #oz-root .oz-brand-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  #oz-root .oz-brand-dot{
    width:9px; height:9px; border-radius:50%;
    background:linear-gradient(135deg,#FF9466,#0B7C86);
    flex:none;
    transition:transform .4s var(--ease);
  }
  #oz-root .oz-code-card:hover .oz-brand-dot{ transform:scale(1.5); }
  #oz-root .oz-brand-name{
    font-family:'Manrope',sans-serif;
    font-weight:800;
    font-size:18px;
    letter-spacing:-.01em;
    text-decoration:underline; text-decoration-color:transparent;
    text-underline-offset:3px;
    transition:text-decoration-color .3s var(--ease);
  }
  #oz-root .oz-code-card:hover .oz-brand-name,
  #oz-root .oz-code-card:focus-visible .oz-brand-name{
    text-decoration-color:currentColor;
  }
  #oz-root .oz-code-card p{
    font-size:13.5px;
    line-height:1.62;
    color:rgba(255,255,255,.62);
    flex:1;
  }
  #oz-root .oz-code-card .oz-more{ color:#FF9466; font-size:13.5px; }
  #oz-root .oz-code-card .oz-more svg{ color:#FF9466; }

  #oz-root .oz-codes-foot{
    margin-top:30px;
    display:flex; align-items:center; justify-content:center;
  }
  #oz-root .oz-codes-foot .oz-btn-outline{
    background:transparent; color:#fff; border-color:var(--navy-line);
  }
  #oz-root .oz-codes-foot .oz-btn-outline:hover{
    background:#fff; color:var(--navy); border-color:#fff;
  }

  /* =========================================================
     Responsive
     ========================================================= */
  @media (max-width:1080px){
    #oz-root .oz-card-grid{ grid-template-columns:repeat(2,1fr); }
  }

  @media (max-width:760px){
    #oz-root section{ padding:56px 0; }
    #oz-root .oz-wrap{ padding:0 18px; }
    #oz-root .oz-head{ margin-bottom:30px; gap:18px; }
    #oz-root .oz-card-grid{ grid-template-columns:1fr 1fr; gap:14px; }
    #oz-root .oz-card-body{ padding:16px 15px 18px; gap:8px; }
    #oz-root .oz-card-body h4{ font-size:15.5px; }
    #oz-root .oz-card-body p{ font-size:13.2px; }
    #oz-root .oz-card-icon{ width:52px; height:52px; border-radius:13px; }
    #oz-root .oz-card-icon svg{ width:24px; height:24px; }
    #oz-root .oz-group-title h3{ font-size:18px; }
    #oz-root .oz-region-card{ width:190px; padding:18px 15px; }
    #oz-root .oz-code-card{ width:220px; padding:20px 16px; }
    #oz-root .oz-carousel-controls{ display:none; }
    #oz-root .oz-track-wrap::before, #oz-root .oz-track-wrap::after{ width:28px; }
  }

  @media (max-width:480px){
    #oz-root .oz-card-grid{ grid-template-columns:1fr; }
    #oz-root .oz-card-media{ aspect-ratio:16/9; }
    #oz-root .oz-head{ flex-direction:column; align-items:flex-start; }
  }

  @media (prefers-reduced-motion:reduce){
    #oz-root *{ transition:none !important; animation:none !important; }
  }

/* =========================================================
   Premium dokunmatik geri bildirim (mobil/tablet)
   Gerçek "hover" desteklemeyen cihazlarda, kartlara dokunulduğunda
   hafif bir geri bildirim (hover efektinin dokunmatik karşılığı)
   verir; böylece masaüstündeki premium his mobilde de korunur.
   ========================================================= */
@media (hover:none){
  #oz-root .oz-card:active{
    transform:translateY(-3px) scale(.99);
    box-shadow:0 12px 26px -18px rgba(16,32,46,.30);
  }
  #oz-root .oz-region-card:active{
    transform:translateY(-2px) scale(.98);
    border-color:rgba(225,84,31,.4);
  }
  #oz-root .oz-code-card:active{
    transform:translateY(-2px) scale(.98);
    border-color:rgba(255,148,102,.55);
  }
  #oz-root .oz-cbtn:active{ transform:scale(.94); }
  #oz-root .oz-btn-outline:active{ transform:scale(.97); }
}

/* Aşırı geniş ekranlarda (>1440px) içerik genişliğini ve boşlukları
   orantılı büyüt; küçük dizüstü ekranlarında (1200–1080px) yatay
   boşluğu daralt, kart ızgarası taşmasın. */
@media (min-width:1440px){
  #oz-root .oz-wrap{ max-width:1280px; }
}
@media (max-width:1180px) and (min-width:1081px){
  #oz-root .oz-wrap{ padding:0 20px; }
}