/* Mütercem public site katmanı — ahmeterenc/Mutercem site/ şablonunun görünümü (evurgen.css'ten).
   Düzen, boşluk ve tipografi görünümlerde Tailwind ile; burada yalnızca Tailwind'in karşılamadığı
   degrade, kadim harf yerleşimi, yapışkan menü, sekme işareti ve kemer görseli var.
   Renkler Citext bordosu (Tailwind primary skalasıyla aynı). */
:root {
    --mt-kirmizi: #c4161c;
    --mt-kirmizi-koyu: #9d1216;
    --mt-bordo: #7f0f13;
    --mt-pembe: #fdf2f2;
    --mt-pembe-cizgi: #f6c4c6;
    --mt-murekkep: #101826;
    /* --mt-kagit, --mt-ikincil, --mt-bronz, --mt-font-*: site temasından (SiteTemasi), layout'ta :root'a yazılır */
    --mt-arduvaz: #5b6b7c;
    --mt-cizgi: #e5e7eb;
}

/* ── Header: degrade üst bant + bandın alt kenarına yarı yarıya oturan beyaz menü kartı ── */
.mt-header { position: relative; z-index: 50; }
.mt-header__ust { background: linear-gradient(100deg, var(--mt-bordo) 0%, var(--mt-kirmizi-koyu) 45%, var(--mt-kirmizi) 100%); }
@media (min-width: 1280px) {
    .mt-header__ust { padding-bottom: 54px; } /* menü kartının yarısı + boşluk; bant 2026-10-21'de büyüdü (G26) */
    .mt-header__menu { position: absolute; left: 0; right: 0; top: 100%; transform: translateY(-50%); }
    .mt-header--yapiskan .mt-header__menu { position: fixed; top: 0; transform: none; background: #fff; box-shadow: 0 6px 20px rgba(16, 24, 38, .1); animation: mt-in .25s ease-out; }
    .mt-header--yapiskan .mt-header__kart { box-shadow: none; border-radius: 0; }
    /* Menü kartının banda taşan yarısı için iç sayfalarda boşluk (ana sayfada hero bu boşluğu kendi taşır) */
    .mt-header-bosluk { height: 40px; }
}
@keyframes mt-in { from { transform: translateY(-100%); } }
.mt-menu-bag[aria-current="page"] { color: var(--mt-kirmizi); border-bottom-color: var(--mt-kirmizi); }
.mt-acilir { border-top: 3px solid var(--mt-kirmizi); }
/* Portallar: dört grup, menü kartının tamamında. Düğmeye göre konumlanırsa sağ gruplar
   ekran dışına taşar ve başlıklar sıkışır. */
.mt-portal-gruplar { display: grid; grid-template-columns: 1fr; gap: 1.35rem 2.75rem; }
.mt-portal-gruplar__baslik {
    margin: .15rem .75rem .7rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--mt-cizgi);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mt-kirmizi);
}
@media (min-width: 1280px) {
    /* Menü düğmeleri sıkı: metinler arası ~26px (2026-10-25; önce ~55px, menü dağınık duruyordu) */
    .mt-header__kart > nav > ul { gap: .25rem; }
    .mt-menu-bag { padding-left: .7rem; padding-right: .7rem; }
    .mt-header__kart { position: relative; }
    .mt-portallar-oge { position: static; }
    .mt-acilir--portallar { left: 0; right: 0; width: auto; top: 100%; }
    .mt-portal-gruplar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mt-acilir--destek { left: 0; right: auto; width: max-content; min-width: 26rem; }
    .mt-acilir--destek a { white-space: nowrap; }
}

/* ── Kadim yazı işaretleri (hero, sayfa başlığı, kemer) ── */
.mt-glifler { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mt-glifler span { position: absolute; color: rgba(255, 255, 255, .06); color: color-mix(in srgb, color-mix(in srgb, var(--mt-bronz, #8f6220) 65%, #fff) 15%, transparent); font-weight: 300; line-height: 1; font-family: "Poppins", "Geeza Pro", "Segoe UI Symbol", system-ui, sans-serif; }
.mt-glifler span:nth-child(1) { font-size: 220px; right: 32%; top: 6%; }
.mt-glifler span:nth-child(2) { font-size: 240px; right: 6%; top: 4%; }
.mt-glifler span:nth-child(3) { font-size: 180px; right: 22%; bottom: 4%; }
.mt-glifler span:nth-child(4) { font-size: 200px; right: 4%; bottom: 0; }
.mt-glifler span:nth-child(5) { font-size: 150px; right: 46%; bottom: 8%; }
.mt-glifler span:nth-child(6) { font-size: 120px; right: 16%; top: 40%; }
@media (max-width: 767px) { .mt-glifler span { font-size: 120px !important; } }

/* ── Hero: sol ~%60 koyu kırmızı ve yazı, sağ ~%40 fotoğraf.
   Zemin aynı bordo ailesinde: siyah ile kırmızı karışınca ortada kahverengi bant oluşuyordu.
   Yükseklik min 560px, lg clamp(560px, 42vw, 800px).
   Çapraz solma 1,5 sn; metin 300 ms gecikmeli. ── */
.mt-hero {
    min-height: 560px;
    background:
        radial-gradient(ellipse at 78% 18%, #c4161c 0%, transparent 52%),
        linear-gradient(110deg, #4a090c 0%, #7f0f13 55%, #9d1216 100%);
}
@media (min-width: 1024px) { .mt-hero { height: clamp(560px, 42vw, 800px); } }
.mt-hero-slayt { opacity: 0; z-index: 0; overflow: hidden; }
.mt-hero-slayt.is-onceki { opacity: 1; z-index: 1; }
.mt-hero-slayt.is-aktif { opacity: 1; z-index: 2; }
.mt-hero.is-hazir .mt-hero-slayt.is-aktif { transition: opacity 1.5s linear; }
/* Dar ekran: fotoğraf üstte, alta doğru erir; yazı altta tam genişlikte.
   Geniş ekran: fotoğraf sağ %40, sol kenarı kısa erir. */
.mt-hero-kadraj {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 220px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
}
.mt-hero-gorsel { object-position: center center; }
.mt-hero-metin__ic { max-width: 36rem; }
@media (min-width: 1024px) {
    .mt-hero-kadraj {
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        height: auto;
        width: 40%;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
    }
    .mt-hero-gorsel { object-position: var(--mt-odak, center center); }
    .mt-hero-metin__ic {
        max-width: min(46rem, calc(62vw - max(0px, (100vw - 1280px) / 2) - 2.5rem));
    }
}
.mt-hero > .mt-glifler { z-index: 1; }
.mt-hero .mt-glifler span { color: rgba(255, 255, 255, .035); }
.mt-hero-gorsel { transform: scale(1); transform-origin: center center; }
.mt-hero.is-hazir .mt-hero-slayt.is-yakin:is(.is-aktif, .is-onceki) .mt-hero-gorsel {
    animation: mt-hero-yakin 9s linear forwards;
}
@keyframes mt-hero-yakin { to { transform: scale(1.04); } }
.mt-hero.is-gizli .mt-hero-gorsel { animation-play-state: paused; }
.mt-hero-metin { opacity: 0; z-index: 4; pointer-events: none; color: #fff; }
.mt-hero-metin h1,
.mt-hero-metin h2,
.mt-hero-metin p { color: #fff; }
.mt-hero-metin.is-aktif { opacity: 1; }
.mt-hero-metin.is-aktif .mt-hero-metin__ic { pointer-events: auto; }
.mt-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: var(--mt-kirmizi);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}
.mt-hero-btn:hover { background: var(--mt-kirmizi-koyu); color: #fff; }
.mt-hero-btn:focus-visible,
.mt-hero .mt-hero-ok:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mt-hero-btn--yazi { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .9); }
.mt-hero-btn--yazi:hover { background: #fff; color: var(--mt-kirmizi); }
.mt-hero .mt-hero-ok {
    display: none;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
}
@media (min-width: 768px) {
    .mt-hero .mt-hero-ok { display: grid; }
}
.mt-hero .mt-hero-ok__ikon {
    width: 1.125rem;
    height: 1.125rem;
    stroke: currentColor;
    stroke-width: 2.25;
}
.mt-hero .mt-hero-ok:hover { background: transparent; color: #fff; opacity: .72; }
.mt-hero.is-hazir .mt-hero-metin { transition: opacity 1.2s ease .3s; }
.mt-hero-kontroller { z-index: 5; }
@media (prefers-reduced-motion: reduce) {
    .mt-hero.is-hazir .mt-hero-slayt.is-aktif,
    .mt-hero.is-hazir .mt-hero-metin { transition: none; }
    .mt-hero .mt-hero-gorsel { animation: none; }
}

/* Portal kartı tonları hub.input.css'te (ana sayfa ve panel ortak kullanır).
   Ana sayfa: renk değişmez. Panel kartındaki gibi görsel hafif yaklaşır, kart bir miktar yükselir. */
/* Kart zemini ikonla aynı renk ailesinde; renkli logo kaybolur. Beyaz ve daha büyük durur. */
.mt-portal-kart .mt-portal-kart__ikon {
    width: 48px; height: 48px; margin-top: 1px; flex-shrink: 0; opacity: 1;
    filter: brightness(0) invert(1);
}
#portallar .mt-kart-izgara > .mt-portal-kart {
    transition: transform .4s ease, box-shadow .4s ease;
}
#portallar .mt-kart-izgara > .mt-portal-kart:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(16, 24, 38, .18);
}
#portallar .mt-kart-izgara > .mt-portal-kart .mt-portal-kart__gorsel img {
    transition: transform .4s ease;
}
#portallar .mt-kart-izgara > .mt-portal-kart:hover .mt-portal-kart__gorsel img {
    transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
    #portallar .mt-kart-izgara > .mt-portal-kart,
    #portallar .mt-kart-izgara > .mt-portal-kart .mt-portal-kart__gorsel img { transition: none; }
    #portallar .mt-kart-izgara > .mt-portal-kart:hover { transform: none; box-shadow: none; }
    #portallar .mt-kart-izgara > .mt-portal-kart:hover .mt-portal-kart__gorsel img { transform: none; }
}

/* ── "Portalların içinde neler var?" sekmeleri ── */
.mt-dosemeler { scrollbar-width: none; scroll-behavior: smooth; }
.mt-dosemeler::-webkit-scrollbar { display: none; }
.mt-doseme[aria-selected="true"] { background: linear-gradient(150deg, var(--mt-kirmizi) 0%, var(--mt-kirmizi-koyu) 55%, var(--mt-bordo) 100%); color: #fff; box-shadow: 0 8px 18px rgba(127, 15, 19, .22); }
.mt-doseme[aria-selected="true"] svg { color: #fff; }
.mt-doseme[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -12px; margin-left: -13px; border: 13px solid transparent; border-bottom: 0; border-top-color: var(--mt-bordo); }

/* ── "Neler yapabilirsiniz?" ── */
.mt-avantaj-ikon { background: linear-gradient(135deg, var(--mt-kirmizi) 0%, var(--mt-bordo) 100%); }
.mt-kemer { border-radius: 160px 160px 12px 12px; background: #f6f3ee; color: #101826; border: 1px solid #e7e1d8; }
.mt-kemer .mt-glifler span { color: rgba(16, 24, 38, .1); }
.mt-kemer .mt-glifler span:nth-child(1) { font-size: 120px; right: 58%; top: 4%; }
.mt-kemer .mt-glifler span:nth-child(2) { font-size: 130px; right: 6%; top: 10%; }
.mt-kemer .mt-glifler span:nth-child(3) { font-size: 110px; right: 54%; bottom: 6%; }
.mt-kemer .mt-glifler span:nth-child(4) { font-size: 110px; right: 8%; bottom: 2%; }
.mt-kemer .mt-glifler span:nth-child(5) { font-size: 80px; right: 64%; top: 42%; }
.mt-kemer .mt-glifler span:nth-child(6) { font-size: 70px; right: 10%; top: 46%; }

/* ── Referans şeridi: logolar arasında ince dikey çizgi ── */
.mt-ref-serit { scrollbar-width: none; scroll-behavior: smooth; }
.mt-ref-serit::-webkit-scrollbar { display: none; }
.mt-ref-logo + .mt-ref-logo { border-left: 1px solid var(--mt-cizgi); }
.mt-ref-logo img { filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.mt-ref-logo:hover img { filter: none; opacity: 1; }

/* Sayılarla Mütercem: menü kartı gibi beyaz kart, footer bandına yapışık. */
.mt-sayilar { position: relative; z-index: 2; margin-bottom: -42px; padding: 8px 0 0; }
.mt-sayilar__kart { background: var(--mt-kagit, #f4f5f4); border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 24, 38, .14); }
.mt-footer { position: relative; background: #f7f4ef !important; color: #101826 !important; border-left: 4px solid #7f0f13; border-bottom: 4px solid #7f0f13; }
.mt-footer .text-white,
.mt-footer [class*="text-white"] { color: #101826 !important; }
.mt-footer a:hover { color: #7f0f13 !important; }
/* Kapaksız video karesi koyu kalır; oynat simgesi beyazdır. */
.mt-poster { background: #101826; }
.zemin-kirmizi { background: #f6f3ee !important; color: #101826; }
.zemin-kirmizi .text-white,
.zemin-kirmizi [class*="text-white"],
.zemin-kirmizi .text-slate-100,
.zemin-kirmizi .text-primary-100,
.zemin-kirmizi .text-primary-200,
.zemin-kirmizi .text-primary-300 { color: #101826 !important; }

/* ── Daire içinde ok olan bağlantı ── */
.mt-yuvarlak-bag > span { transition: transform .15s; }
.mt-yuvarlak-bag:hover > span { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .mt-dosemeler, .mt-ref-serit { scroll-behavior: auto; }
    .mt-header--yapiskan .mt-header__menu { animation: none; }
}

/* Nasıl çalışır? — üç adım, hero ile portallar arasında (Site Notlar, 2026-10-25) */
.mt-nasil__baslik { margin-bottom: 22px; text-align: center; font-size: 26px; font-weight: 600; letter-spacing: -.2px; color: #101826; }
.mt-nasil__adimlar { display: grid; gap: 14px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 768px) { .mt-nasil__adimlar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.mt-nasil__adim { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 20px 22px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
.mt-nasil__adim strong { display: block; margin-bottom: 4px; font-size: 17px; font-weight: 600; color: #101826; }
.mt-nasil__adim span > span { display: block; font-size: 14.5px; line-height: 1.55; color: #5b6b7c; }
.mt-nasil__ikon { width: 34px; height: 34px; flex-shrink: 0; color: var(--mt-kirmizi); }
.mt-nasil__no { position: absolute; top: 12px; right: 14px; font-size: 13px; font-weight: 700; color: rgba(127, 15, 19, .35); }

/* Paket şeridi: bordo ailesinde zemin, başlangıç fiyatı ve belirgin düğme */
.mt-paket { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; padding: 22px 24px; border-radius: 14px; color: #fff;
    background: linear-gradient(110deg, var(--mt-bordo) 0%, var(--mt-kirmizi-koyu) 60%, var(--mt-kirmizi) 100%); box-shadow: 0 12px 26px rgba(127, 15, 19, .18); }
@media (min-width: 900px) { .mt-paket { flex-direction: row; align-items: center; gap: 22px; } }
.mt-paket__ikon { width: 40px; height: 40px; flex-shrink: 0; }
.mt-paket__metin { flex: 1; min-width: 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.mt-paket__baslik { font-size: 19px; font-weight: 650; color: #fff; }
.mt-paket__fiyat { font-size: 15px; color: rgba(255, 255, 255, .88); white-space: nowrap; }
.mt-paket__fiyat strong { font-size: 22px; font-weight: 700; color: #fff; }
@media (max-width: 479px) { .mt-paket__fiyat { white-space: normal; } }
.mt-paket__cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 20px; border-radius: 8px;
    background: #fff; color: var(--mt-bordo); font-size: 15px; font-weight: 600; white-space: nowrap; transition: background-color .2s ease; }
.mt-paket__cta:hover { background: #fdecec; }
.mt-nasil__devam { margin-top: 14px; text-align: center; }
.mt-nasil__devam a { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--mt-kirmizi); }
.mt-nasil__devam a:hover { text-decoration: underline; text-underline-offset: 3px; }