/* =====================================================================
   DATCO ŞABLON ÇEKİRDEĞİ  (assets/datco/datco-core.css)
   ---------------------------------------------------------------------
   Kaynak: docs/blueprint/DATco/css/custom.css (+ bootstrap 5.3 grid'inin
   kullanılan alt kümesi). DATco sayfaları siteye taşınırken ORTAK temel.

   KURAL: Her şey .dtc sarmalayıcısı altında — sitenin header/footer'ı,
   canvas (.ctb-*) ve kit (.dtk-*) stilleri ETKİLENMEZ. Bootstrap'in
   tamamı yüklenmez (global .row/.container sitenin geri kalanını bozardı);
   sadece şablonun kullandığı grid sınıfları burada kapsamlı yeniden yazılır.

   Yeni bir DATco sayfası eklerken: sayfaya özel CSS'i assets/datco/pages/
   altına koy, bu dosyaya sadece BİRDEN FAZLA sayfanın paylaştığı kuralları ekle.
   ===================================================================== */

/* ---- 01. Değişkenler (şablonun :root'u, .dtc'ye taşındı) ------------ */
.dtc {
    --primary-color: #222222;
    --secondary-color: #F5F5F5;
    --text-color: #81848A;
    --accent-color: #FF9900;
    --white-color: #FFFFFF;
    --divider-color: #EBEBEB;
    --dark-divider-color: #FFFFFF1A;
    --default-font: "Manrope", sans-serif;
    --dtc-gutter: 1.5rem;

    font-family: var(--default-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7em;
    color: var(--text-color);
    background: var(--white-color);
    overflow-x: clip;
}

/* ---- 02. Genel --------------------------------------------------------- */
.dtc *, .dtc *::before, .dtc *::after { box-sizing: border-box; }
.dtc p { line-height: 1.7em; margin: 0 0 1.6em; }
.dtc h1, .dtc h2, .dtc h3, .dtc h4, .dtc h5, .dtc h6 {
    font-family: var(--default-font);
    margin: 0;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: normal;
    color: var(--primary-color);
}
.dtc figure { margin: 0; }
.dtc img { max-width: 100%; }
.dtc a, .dtc a:hover, .dtc a:focus { text-decoration: none; }
.dtc a:focus:not(:focus-visible) { outline: 0; }
.dtc a:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 4px; }

/* ---- Grid (bootstrap 5.3 alt kümesi, .dtc kapsamlı) --------------------- */
.dtc .container {
    width: 100%;
    max-width: 1300px;
    margin-inline: auto;
    padding-inline: 15px;
}
.dtc .row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: calc(var(--dtc-gutter) * -.5);
}
.dtc .row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-inline: calc(var(--dtc-gutter) * .5);
}
.dtc .align-items-center { align-items: center; }
.dtc .col-6  { flex: 0 0 auto; width: 50%; }
.dtc .col-12 { flex: 0 0 auto; width: 100%; }
@media (min-width: 768px) {
    .dtc .col-md-4  { flex: 0 0 auto; width: 33.333333%; }
    .dtc .col-md-6  { flex: 0 0 auto; width: 50%; }
    .dtc .col-md-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 992px) {
    .dtc .col-lg-3  { flex: 0 0 auto; width: 25%; }
    .dtc .col-lg-4  { flex: 0 0 auto; width: 33.333333%; }
    .dtc .col-lg-6  { flex: 0 0 auto; width: 50%; }
    .dtc .col-lg-8  { flex: 0 0 auto; width: 66.666667%; }
    .dtc .col-lg-9  { flex: 0 0 auto; width: 75%; }
    .dtc .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

/* ---- Görsel parlama efekti (şablon: .image-anime) ---------------------- */
.dtc .image-anime { position: relative; overflow: hidden; }
.dtc .image-anime::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, .3);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
    pointer-events: none;
}
.dtc .image-anime:hover::after,
.dtc a:hover .image-anime::after {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

/* =====================================================================
   15. Sayfa başlığı (şablon: .page-header) — PARALLAX
   ---------------------------------------------------------------------
   Şablon parallaxie.js ile background-attachment:fixed kullanıyordu —
   bu, görseli HEADER'a değil TÜM EKRANA göre "cover" ölçekler: 1920×600
   bir görsel 1080px yüksek ekranda ~1.8x büyütülüp bulanıklaşır ve
   kenarları kesilirdi. Aynı parallax hissi burada header'ın KENDİ
   boyutuna göre ölçeklenen bir <img> katmanıyla (transform) veriliyor:
   1920px görsel 1920px ekranda ~1:1 gösterilir, bozulma olmaz.
   ===================================================================== */
.dtc .page-header {
    position: relative;
    overflow: hidden;
    background: var(--primary-color);
    padding: 150px 0;
    isolation: isolate;
}
.dtc .page-header__media {
    position: absolute;
    left: 0;
    right: 0;
    top: -12%;
    bottom: -12%;
    z-index: 0;
    will-change: transform;
}
.dtc .page-header__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
}
.dtc .page-header::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0) 23.99%, rgba(0, 0, 0, .8) 100%);
    z-index: 1;
    pointer-events: none;
}
.dtc .page-header-box { position: relative; z-index: 2; }
.dtc .page-header-box h1 {
    color: var(--white-color);
    font-size: 70px;
    font-weight: 300;
    line-height: 1.2em;
    letter-spacing: -.01em;
    margin-bottom: 5px;
    cursor: none;
}
.dtc .page-header-box h1 span { font-weight: 700; }

.dtc .page-header-box ol,
.dtc .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.dtc .page-header-box ol li.breadcrumb-item {
    text-transform: capitalize;
    color: var(--white-color);
}
.dtc .page-header-box ol li.breadcrumb-item a { color: inherit; transition: color .3s ease; }
.dtc .page-header-box ol li.breadcrumb-item a:hover { color: var(--accent-color); }
.dtc .page-header-box ol li.breadcrumb-item.active { color: var(--accent-color); }
.dtc .page-header-box ol .breadcrumb-item + .breadcrumb-item { padding-left: .5rem; }
/* Şablon FontAwesome "\f111" (içi dolu daire, 6px) kullanıyordu — font
   yüklenmesine bağımlı olmasın diye aynı görünüm saf CSS ile. */
.dtc .page-header-box ol .breadcrumb-item + .breadcrumb-item::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    margin-right: .5rem;
    vertical-align: middle;
    transform: translateY(-1px);
}

/* ---- Magic cursor (şablon: mousecursor.css + .cb-cursor:before) -------- */
.cb-cursor { z-index: 100000; }
.cb-cursor:before { background: #FF9900; }
.cb-cursor-text { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 14px; white-space: nowrap; }
/* Dokunmatik cihazlarda imleç yok — gizli imleç (cursor:none) de uygulanmaz. */
@media (hover: none), (pointer: coarse) {
    .cb-cursor { display: none !important; }
    .dtc [data-cursor-text], .dtc [data-cursor-text] a, .dtc .page-header-box h1 { cursor: auto !important; }
}

/* ---- 31. Duyarlı (şablonun kırılımları) -------------------------------- */
@media only screen and (max-width: 991px) {
    .dtc .page-header { padding: 80px 0; }
    .dtc .page-header-box h1 { font-size: 54px; }
}
@media only screen and (max-width: 767px) {
    .dtc .page-header-box h1 { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .dtc .page-header__media { will-change: auto; }
    .dtc .image-anime:hover::after, .dtc a:hover .image-anime::after { transition: none; }
}