/* --- Renk şeması ------------------------------------------------------------
   Tasarımın tek bir renk şeması vardır: açık. Bildirim yapılmazsa Chrome ve
   Samsung Internet gibi tarayıcılar, cihaz koyu temadayken sayfayı kendi
   algoritmalarıyla karartıyor; logo ve ince metinler okunmaz hâle geliyordu.
   Aşağıdaki bildirim bu otomatik dönüşümü kapatır — meta etiketiyle birlikte
   çalışır (bazı sürümler yalnızca birini dikkate alıyor).                    */
:root { color-scheme: light; }
html { color-scheme: light; }

/* Kullanıcı sistem genelinde koyu tema seçse bile zemin ve metin sabit kalır. */
@media (prefers-color-scheme: dark) {
    :root { color-scheme: light; }
    html, body { background-color: #fff; color: #202124; }
}

/* ==========================================================================
   Site özel stilleri.

   Tasarım dosyalarına dokunulmaz; buraya yalnızca marka uyarlamaları yazılır.
   Bu dosya varlık listesinin en sonunda yüklenir.
   ========================================================================== */

/* --- Görsel logo -----------------------------------------------------------
   Tasarımın logo yuvası 74px sabit genişlik varsayar (Google'ın yatay SVG'si
   için). Dikey veya kare bir marka logosu bu kuralla başlığı taşırır; bu
   yüzden görsel logolar genişlik yerine yüksekliğe göre ölçeklenir.        */
.ug-logo-image {
    width: auto;
    height: calc(34px * var(--ug-logo-scale, 1));
    max-width: calc(150px * var(--ug-logo-scale, 1));
    object-fit: contain;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .ug-logo-image { height: calc(28px * var(--ug-logo-scale, 1)); }
}

/* --- Üst menü: ortalı, ikonlu, açılır panelli -------------------------------
   Tasarımın kendi renk ve yuvarlaklık değerleri korunur; yalnızca menü
   davranışı genişletilir.                                                   */

/* Menü şeridini başlığın ortasına yerleştir */
._navScrollWrapper_4rcuf_255 { justify-content: center; }
.ug-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    height: 100%;
}

.ug-nav__item { position: static; display: flex; align-items: center; height: 100%; }

.ug-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.ug-nav__icon { flex: none; opacity: .75; }
.ug-nav__link:hover .ug-nav__icon { opacity: 1; }
.ug-nav__caret { flex: none; opacity: .6; transition: transform .18s ease; }
.ug-nav__item--has-panel[data-open] .ug-nav__caret { transform: rotate(180deg); }

/* Açılır panel: başlığın altında tam genişlik */
.ug-panel {
    position: absolute;
    inset-inline: 0;
    /* Panelin üst kenarı başlığın ölçülen yüksekliğine oturur. "top: 100%"
       kapsayıcının dolgu kutusuna göre hesaplandığı için birkaç piksel
       yukarıda kalıyordu; değer menü betiği tarafından yazılır.          */
    top: var(--ug-header-h, 65px);
    z-index: 40;
    background: #fff;
    border-top: 1px solid #e8eaed;
    box-shadow: 0 12px 28px rgba(32, 33, 36, .14);
    animation: ug-panel-in .16s ease;
}
.ug-panel[hidden] { display: none; }

/* Yalnızca saydamlık canlandırılır. Konum değiştiren bir dönüşüm
   kullanılmaz: animasyon askıya alınırsa panel kaymış hâlde kalır. */
@keyframes ug-panel-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ug-panel { animation: none; }
}

.ug-panel__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px 32px 28px;
}

.ug-panel__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.ug-panel__grid--list {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    max-width: 720px;
}

.ug-panel__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-radius: 16px;
    color: #202124;
    text-decoration: none;
    transition: background .14s ease;
}
.ug-panel__card:hover { background: #f1f3f4; text-decoration: none; }

.ug-panel__thumb {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: #f1f3f4;
}
.ug-panel__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ug-panel__body { display: flex; flex-direction: column; gap: 3px; }
.ug-panel__title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.35;
}
.ug-panel__desc { font-size: 13px; line-height: 1.45; color: #5f6368; }

.ug-panel__grid--list .ug-panel__card { flex-direction: row; align-items: center; padding: 9px 12px; }

.ug-panel__more { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e8eaed; }
.ug-panel__more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 15px;
    color: #1a73e8;
    text-decoration: none;
}
.ug-panel__more-link:hover { text-decoration: underline; }
.ug-panel__more-link svg { transition: transform .16s ease; }
.ug-panel__more-link:hover svg { transform: translateX(3px); }

/* Mobil menüde alt öğeler
   Alt menüler kapalı başlar; başlığın yanındaki oka basınca açılır.
   Betik yüklenmezse (JS kapalı) açık kalırlar — içerik erişilebilir olur. */
.ug-submenu { margin: 2px 0 10px; padding-inline-start: 18px; border-inline-start: 2px solid #e8eaed; }
.ug-has-toggle > .ug-submenu { display: none; }
.ug-has-toggle.ug-open > .ug-submenu { display: block; }

.ug-has-toggle { position: relative; }
.ug-submenu-toggle {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    color: #5f6368;
    cursor: pointer;
}
.ug-submenu-toggle svg { transition: transform .18s ease; }
.ug-has-toggle.ug-open > .ug-submenu-toggle svg { transform: rotate(180deg); }
.ug-submenu-toggle:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; border-radius: 8px; }
.ug-submenu__link {
    display: block;
    padding: 7px 0;
    font-size: 15px;
    color: #5f6368;
    text-decoration: none;
}
.ug-submenu__link:hover { color: #202124; }
.ug-submenu__more { color: #1a73e8; font-weight: 500; }

/* Dar ekranda açılır panel kullanılmaz; mobil menü devreye girer.
   Sınır, masaüstü menüsünün açıldığı genişlikle aynıdır. */
@media (max-width: 1279px) {
    .ug-panel { display: none !important; }
}

/* --- Menüyü başlığın tam ortasına al ---------------------------------------
   Tasarımda logo ile sağdaki düğme farklı genişlikte olduğu için, ortadaki
   menü şeridi görsel olarak sola kayar. Yan blokları eşit esneklikte yapıp
   içeriklerini kendi kenarlarına yaslayınca menü gerçek merkeze oturur.
   Yalnızca masaüstü menüsünün göründüğü genişliklerde uygulanır.           */
@media (min-width: 1280px) {
    /* Logo ve sağdaki düğme aynı genişlikte sabit bloklara oturur; böylece
       aradaki menü şeridi başlığın gerçek merkezine denk gelir. Akış
       bozulmadığı için tıklama alanları da üst üste binmez.
       --ug-header-side değeri iki yanın da sığacağı en küçük genişliktir.

       Ölçülen doğal genişlikler: logo 103px, sağ blok (arama + düğme) 184px.
       Yan blok bunların büyüğüne eşitlenir. */
    /* Logo bloğu gerekirse daralır (doğal genişliği 103px). Böylece dar
       kalan durumda menü kırpılmak yerine merkezden bir miktar kayar. */
    ._logo_1m9y2_138 {
        flex: 0 1 var(--ug-header-side, 184px);
        justify-content: flex-start;
    }
    ._cta_1m9y2_375 {
        flex: 0 0 var(--ug-header-side, 184px);
        display: flex;
        justify-content: flex-end;
    }
    ._navScrollWrapper_4rcuf_255 {
        flex: 1 1 0 !important;
    }
}

/* --- Masaüstü menüsünün açıldığı genişlik ------------------------------------
   Tasarım masaüstü menüsünü 960px'te açar; o menü dört kısa İngilizce
   başlıktan oluşur. Buradaki menüde beş Türkçe başlık ve ikonlar var,
   doğal genişliği 763px. Yan bloklar ve kap boşluklarıyla birlikte en az
   1280px pencere gerekiyor; altında öğeler sıkışıp kırpılıyordu.
   Bu aralıkta tasarımın
   kendi mobil menüsü (hamburger) kullanılır — menü hiçbir genişlikte
   kırpılmaz. */
@media (max-width: 1279px) {
    ._burger_1m9y2_107 { display: flex !important; }
    ._navScrollWrapper_4rcuf_255 { display: none !important; }

    /* Hamburger sağ uçta dursun: esnek sırada en sona alınır ve önündeki
       boşluk otomatik doldurulur. Kapatma düğmesi de aynı tarafa gelir. */
    ._burger_1m9y2_107 { order: 99; margin-inline-start: auto; }
    ._mobileMenuHeader_1m9y2_433 { flex-direction: row-reverse; }

    /* Mobil menü satırında ikon ve başlık yan yana dursun.
       Tasarımın ikonu display:block olduğu için başlığı alt satıra itiyordu;
       kapsayıcı esnek satıra çevrilip ikon daralmaz hâle getirilir. */
    ._mobileMenuLinkLabel_1m9y2_513 {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    ._mobileMenuLinkLabel_1m9y2_513 > svg { flex: none; }

    /* Alt menü oku başlığın üstüne binmesin. */
    .ug-has-toggle > ._mobileMenuLink_1m9y2_449 { padding-inline-end: 44px; }
}
@media (max-width: 1279px) {
    .menu\:open ._mobileMenu_1m9y2_409 { display: flex !important; }
}

/* 1280-1439px arası: menü sığar ama boşluğu yoktur; bağlantı iç boşluğu
   biraz daraltılır. İkonlar her genişlikte görünür kalır. */
@media (min-width: 1280px) and (max-width: 1439px) {
    .ug-nav { gap: 2px; }
    .ug-nav__link { padding-left: 12px; padding-right: 12px; }
}

/* Menü öğeleri hiçbir koşulda daralmaz; daralınca metin kırpılıyor */
.ug-nav__item { flex: none; }

/* --- Sayfa başlığı: solda metin, sağda kare görsel ---------------------------
   Tasarımın kendi başlık bölümü ortalanmış metin ve altında geniş bant
   görsel varsayar. Bant görsel yalnızca panoramik çizimlerle iyi durur;
   kare ve dikey fotoğraflarda esner. Bu düzende metin sola yaslanır,
   görsel sağ köşede kare bir kutuya oturur. Tipografi tasarımın kendi
   sınıflarından gelir; buradaki ölçüler yalnızca yerleşimi kurar.

   Kap ölçüleri tasarımın _container_ kuralıyla birebir aynıdır
   (max-width 1440px, yan boşluk 24/48/64px) — böylece başlığın sol kenarı
   ve görsel kutusunun sağ kenarı alttaki kart ızgarasıyla hizalanır. */
.ug-hero--split {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 32px;
    text-align: start;
    max-width: 1440px;
    margin-inline: auto;
    padding: 48px 24px 0;
}

.ug-hero--split .ug-hero__text { min-width: 0; }

/* Ortalama ve alt boşluk kuralları bu düzende geçersiz kılınır */
.ug-hero--split ._headline_xuuc8_116 {
    margin: 0 0 20px;
    max-width: none;
    text-align: start;
}
.ug-hero--split ._body_xuuc8_127 {
    margin: 0;
    max-width: 60ch;
    text-align: start;
}
.ug-hero--split ._eyebrow_xuuc8_110 { text-align: start; }

/* Dar ekranda görsel metnin altına iner; kutu aşırı büyümesin */
.ug-hero__media {
    min-width: 0;
    max-width: 420px;
}

.ug-hero__frame {
    aspect-ratio: 1 / 1;
    border-radius: 28px;
    overflow: hidden;
    background: #f1f3f4;
    box-shadow: 0 1px 2px rgba(60, 64, 67, .08), 0 8px 24px rgba(60, 64, 67, .10);
}
.ug-hero__frame picture,
.ug-hero__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 600px) {
    .ug-hero--split { padding: 56px 48px 0; }
}

@media (min-width: 1024px) {
    .ug-hero--split {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 56px;
        padding: 72px 64px 0;
    }
    .ug-hero__media { max-width: none; }
}

/* --- İletişim formu ---------------------------------------------------------
   Tasarımda form yok; bu blok tasarımın tipografi ve renk değerlerini
   (Google Sans, #202124 metin, #5f6368 ikincil, #0d652d vurgu) izleyen
   yalın bir form ızgarası kurar. Düğme tasarımın kendi sınıfını kullanır. */
/* Bölüm, sayfanın diğer blokları gibi tasarımın kap ölçülerine oturur;
   form sütunu okunabilirlik için ayrıca sınırlanır. */
.ug-form-section {
    box-sizing: border-box;
    max-width: 1440px;
    margin-inline: auto;
    padding: 8px 24px 0;
    text-align: start;
}
.ug-form-section > ._title_8k4am_109,
.ug-form-section ._body_8k4am_93,
.ug-form-section .ug-form,
.ug-form-section .ug-form-flash { max-width: 760px; text-align: start; }

/* İki sütun: solda iletişim bilgileri, sağda form */
.ug-form-layout { display: grid; gap: 32px; margin-top: 32px; }

.ug-form-section--split .ug-form-layout { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 900px) {
    .ug-form-section--split .ug-form-layout {
        grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
        gap: 56px;
        align-items: start;
    }
}

.ug-form-section--split .ug-form-main .ug-form { margin-top: 0; }
.ug-form-section--split .ug-form-main .ug-form-flash { margin-top: 0; margin-bottom: 20px; }

/* Sol sütun: iletişim bilgileri kutusu */
.ug-form-aside {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 28px;
    color: #5f6368;
    font-family: "Google Sans Text", Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 24px;
}
.ug-form-aside h2,
.ug-form-aside h3 {
    color: #202124;
    font-family: "Google Sans", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    margin: 0 0 12px;
}
.ug-form-aside h2 + p,
.ug-form-aside h3 + p { margin-top: 0; }
.ug-form-aside p { margin: 0 0 10px; }
.ug-form-aside > :last-child { margin-bottom: 0; }
.ug-form-aside a { color: #0d652d; text-decoration: none; overflow-wrap: anywhere; }
.ug-form-aside a:hover { text-decoration: underline; }
.ug-form-aside ul { margin: 0 0 10px; padding-left: 20px; }

@media (min-width: 600px) { .ug-form-section { padding-inline: 48px; } }
@media (min-width: 1024px) { .ug-form-section { padding-inline: 64px; } }

.ug-form { margin-top: 32px; }

.ug-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
}
.ug-form__field--full,
.ug-form__subject { grid-column: 1 / -1; }

.ug-form__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.ug-form__field label {
    color: #202124;
    font-family: "Google Sans", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}
.ug-form__req { color: #c5221f; }

.ug-form__field input,
.ug-form__field select,
.ug-form__field textarea {
    box-sizing: border-box;
    width: 100%;
    color: #202124;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 8px;
    padding: 12px 14px;
    font-family: "Google Sans", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 24px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ug-form__field textarea { resize: vertical; min-height: 96px; }
.ug-form__field input:focus,
.ug-form__field select:focus,
.ug-form__field textarea:focus {
    outline: none;
    border-color: #0d652d;
    box-shadow: 0 0 0 3px rgba(13, 101, 45, .14);
}
.ug-form__field input:disabled,
.ug-form__field select:disabled,
.ug-form__field textarea:disabled { background: #f8f9fa; color: #80868b; }

/* Konuya özel blok: ortak alanlardan görsel olarak ayrılır */
.ug-form__subject {
    border-inline-start: 3px solid #0d652d;
    background: #f8faf8;
    border-radius: 0 12px 12px 0;
    padding: 20px 20px 20px 22px;
}
.ug-form__subject[hidden] { display: none; }

.ug-form__note {
    color: #5f6368;
    font-family: "Google Sans", Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 22px;
    margin: 0 0 16px;
}
.ug-form__note--small { margin: 20px 0 0; font-size: 13px; }
.ug-form__note :last-child { margin-bottom: 0; }

.ug-form__consent label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    color: #5f6368;
    line-height: 22px;
    cursor: pointer;
}
.ug-form__consent input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: #0d652d; }

.ug-form__error { color: #c5221f; font-size: 13px; line-height: 18px; margin: 0; }

.ug-form__actions { margin-top: 28px; }

/* Bal kabı alanı ekrandan kaldırılır ama ekran okuyucudan da gizlenir */
.ug-form__trap {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ug-form-flash { margin-top: 24px; display: grid; gap: 10px; }
.ug-form-flash__item {
    margin: 0;
    border-radius: 10px;
    padding: 14px 18px;
    font-family: "Google Sans", Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 22px;
}
.ug-form-flash__item--success { background: #e6f4ea; color: #0d652d; border: 1px solid #b7e1c3; }
.ug-form-flash__item--error   { background: #fce8e6; color: #c5221f; border: 1px solid #f5c6c2; }
.ug-form-flash__item--info    { background: #e8f0fe; color: #1a73e8; border: 1px solid #c3d7fb; }

@media (max-width: 767px) {
    .ug-form__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .ug-form__subject { padding: 16px; border-radius: 0 10px 10px 0; }
}

/* --- Logo yanındaki marka ikonu ---------------------------------------------
   İkon logonun soluna, dikey merkezleri çakışacak biçimde yerleşir.
   Ölçek tek bir değişkenden gelir (Ayarlar → Logo & üst menü → "Logo ve
   ikon ölçeği"), böylece ikon ve logo her zaman birlikte büyür/küçülür. */
._logo_1m9y2_138 {
    gap: calc(10px * var(--ug-logo-scale, 1));
}

.ug-logo-icon {
    display: block;
    width: auto;
    height: calc(34px * var(--ug-logo-scale, 1));
    max-width: calc(46px * var(--ug-logo-scale, 1));
    object-fit: contain;
    flex: none;
}

@media (max-width: 767px) {
    .ug-logo-icon {
        height: calc(28px * var(--ug-logo-scale, 1));
        max-width: calc(38px * var(--ug-logo-scale, 1));
    }
}

/* --- Harita bölümü ----------------------------------------------------------
   Yatay şerit; kap ölçüleri sayfanın diğer bloklarıyla aynı hizada. */
.ug-map {
    box-sizing: border-box;
    max-width: 1440px;
    margin-inline: auto;
    padding: 0 24px;
}
.ug-map__header { max-width: 760px; margin-bottom: 20px; }
.ug-map__header h2 { margin: 0 0 8px; }
.ug-map__text {
    color: #5f6368;
    font-family: "Google Sans Text", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 24px;
}
.ug-map__text > :last-child { margin-bottom: 0; }

.ug-map__frame {
    height: var(--ug-map-height, 380px);
    border-radius: 16px;
    overflow: hidden;
    background: #f1f3f4;
    border: 1px solid #e8eaed;
}
.ug-map__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (min-width: 600px) { .ug-map { padding-inline: 48px; } }
@media (min-width: 1024px) { .ug-map { padding-inline: 64px; } }
@media (max-width: 599px) {
    .ug-map__frame { height: min(var(--ug-map-height, 380px), 300px); border-radius: 12px; }
}

/* --- Yukarı çık düğmesi -----------------------------------------------------
   Sağ altta sabit durur; sayfa bir ekran boyu kaydırılınca belirir.
   Renk ve yuvarlaklık tasarımın düğme değerlerinden alınmıştır. */
.ug-to-top {
    position: fixed;
    inset-inline-end: 24px;
    inset-block-end: 24px;
    z-index: 900;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #0d652d;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(60, 64, 67, .28), 0 6px 18px rgba(60, 64, 67, .18);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}
.ug-to-top[hidden] { display: none; }
.ug-to-top[data-gorunur] { opacity: 1; transform: translateY(0); }
.ug-to-top:hover { background: #0b5626; }
.ug-to-top:focus-visible { outline: 3px solid #a8dab5; outline-offset: 2px; }

@media (max-width: 599px) {
    .ug-to-top { inset-inline-end: 16px; inset-block-end: 16px; width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .ug-to-top { transition: opacity .2s ease; transform: none; }
    .ug-to-top[data-gorunur] { transform: none; }
}

/* Yazdırmada gerek yok */
@media print { .ug-to-top { display: none !important; } }

/* --- Kahraman: dönen kelime şeridi -------------------------------------------
   Tasarımın logo yuvasının (_logoWrapper_) yerine geçer; aynı alt boşluğu
   ve ortalamayı korur. Kelimeler farklı uzunlukta olduğu için kabın
   genişliği JavaScript tarafından ölçülüp yumuşakça değiştirilir. */
.ug-rotator-wrap { margin-bottom: 40px; }

.ug-rotator-line {
    margin: 0;
    font-family: "Google Sans", Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.ug-rotator {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    vertical-align: baseline;
    /* Ölçüm tamamlanana kadar geçiş uygulanmaz; ilk çizimde sıçrama olmasın */
    min-height: 1.25em;
}
.ug-rotator--hazir { transition: width .55s cubic-bezier(.2, .7, .2, 1); }

.ug-rotator__word { display: inline-block; }

/* Üst üste binen kelimeler: giden ve gelen aynı anda çizilir */
.ug-rotator__word--ustte { position: absolute; left: 0; top: 0; width: 100%; }

/* Animasyon öğe eklendiği anda kendiliğinden başlar; JavaScript'in
   sınıf kaldırıp kare beklemesine gerek kalmaz.

   Giriş animasyonunda bilerek "fill-mode" KULLANILMAZ: kelimenin görünür
   olması animasyonun çalışmasına bağlı olmamalıdır. Tarayıcı animasyonları
   kısıtlarsa (arka plan sekmesi, düşük güç kipi, eski tarayıcı) kelime
   efektsiz ama okunur biçimde anında görünür. "both" ile başlangıç karesi
   uygulansaydı, animasyon ilerlemediğinde kelime saydam kalır ve kahraman
   alanı boş görünürdü. */
.ug-rotator__word--giris { animation: ug-kelime-gir .55s cubic-bezier(.2, .7, .2, 1); }
.ug-rotator__word--cikis { animation: ug-kelime-cik .5s cubic-bezier(.2, .7, .2, 1) forwards; }

@keyframes ug-kelime-gir {
    from { opacity: 0; transform: translateY(.5em); filter: blur(6px); }
}
@keyframes ug-kelime-cik {
    to { opacity: 0; transform: translateY(-.5em); filter: blur(6px); }
}

/* Genişlik ölçümü için kullanılan görünmez kopya */
.ug-rotator__word--olcum {
    position: static;
    visibility: hidden;
    animation: none;
    width: auto;
}

@media (max-width: 767px) {
    .ug-rotator-wrap { margin-bottom: 28px; }
    .ug-rotator-line { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .ug-rotator--hazir { transition: none; }
    .ug-rotator__word--giris,
    .ug-rotator__word--cikis { animation: none; }
}

/* --- Ürün medyası: renkli sekmeler + galeri + video --------------------------
   Sekme şeridi kahraman bölümünün altında, galeriler sayfa metninin
   altındadır. Sekme rengi her sekmede --ug-tab-renk ile verilir. */
.ug-mediatabs {
    box-sizing: border-box;
    max-width: 1440px;
    margin: 28px auto 0;
    padding: 0 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ug-mediatabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 11px 22px;
    border-radius: 100px;
    background: var(--ug-tab-renk, #0d652d);
    color: #fff;
    font-family: "Google Sans", Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(60, 64, 67, .2), 0 4px 12px rgba(60, 64, 67, .14);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.ug-mediatabs__tab:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(60, 64, 67, .22), 0 8px 20px rgba(60, 64, 67, .18);
    text-decoration: none;
}
.ug-mediatabs__tab:focus-visible { outline: 3px solid #202124; outline-offset: 3px; }
.ug-mediatabs__tab svg { flex: none; }

.ug-media {
    box-sizing: border-box;
    max-width: 1440px;
    margin-inline: auto;
    padding: 0 24px;
}
.ug-media__block { padding-top: 8px; }
.ug-media__block + .ug-media__block { margin-top: 56px; }

/* Çapaya atlarken başlık sabit üst menünün altında kalmasın */
.ug-media__block { scroll-margin-top: 96px; }

.ug-media__title {
    margin: 0 0 24px;
    padding-inline-start: 14px;
    border-inline-start: 5px solid var(--ug-tab-renk, #0d652d);
}

.ug-media__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ug-media__figure { margin: 0; }

/* Html::picture() sınıfı <picture> öğesine koyar; object-fit ise yalnızca
   yerini alan öğelerde (img) çalışır. Bu yüzden oran <picture> üzerinde
   kurulur, kırpma içteki <img> üzerinde yapılır. Böylece panelden 4:3
   dışında bir fotoğraf yüklendiğinde de ızgara bozulmaz. */
.ug-media__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    background: #f1f3f4;
}
.ug-media__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ug-media__caption {
    margin-top: 8px;
    color: #5f6368;
    font-family: "Google Sans Text", Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 20px;
}

/* Yatay video: 16/9. Shorts dikey çekildiği için ayrı oran ve dar kap. */
.ug-media__video {
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    max-width: 960px;
}
.ug-media__video--dikey {
    aspect-ratio: 9 / 16;
    max-width: 360px;
}
.ug-media__video iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (min-width: 600px) {
    .ug-mediatabs, .ug-media { padding-inline: 48px; }
    .ug-media__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .ug-mediatabs, .ug-media { padding-inline: 64px; }
    .ug-media__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 599px) {
    .ug-mediatabs { gap: 10px; margin-top: 20px; }
    .ug-mediatabs__tab { flex: 1 1 100%; justify-content: center; font-size: 15px; }
    .ug-media__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .ug-media__block + .ug-media__block { margin-top: 40px; }
}

/* --- Ürün fotoğrafı büyütme ------------------------------------------------- */
.ug-media__link {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    cursor: zoom-in;
}
.ug-media__link:focus-visible { outline: 3px solid #0d652d; outline-offset: 3px; }
.ug-media__link .ug-media__img { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.ug-media__link:hover .ug-media__img { transform: scale(1.04); }

/* Büyüteç rozeti: fotoğrafın tıklanabilir olduğunu belli eder */
.ug-media__zoom {
    position: absolute;
    inset-block-end: 10px;
    inset-inline-end: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #202124;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 3px rgba(60, 64, 67, .3);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease;
}
.ug-media__link:hover .ug-media__zoom,
.ug-media__link:focus-visible .ug-media__zoom { opacity: 1; transform: none; }
/* Dokunmatik cihazda vurgu durumu yok; rozet her zaman görünür */
@media (hover: none) {
    .ug-media__zoom { opacity: 1; transform: none; }
}

.ug-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    background: rgba(32, 33, 36, .93);
}
.ug-lightbox--acik { display: flex; }
/* Görüntüleyici açıkken arka plan kaymasın */
.ug-lightbox-kilit, .ug-lightbox-kilit body { overflow: hidden; }

.ug-lightbox__sahne {
    margin: 0;
    max-width: min(1200px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.ug-lightbox__gorsel {
    max-width: 100%;
    /* Alt yazı ve kenar boşluğu için pay bırakılır */
    max-height: calc(100vh - 140px);
    width: auto;
    height: auto;
    border-radius: 8px;
    background: #000;
    object-fit: contain;
}
.ug-lightbox__yazi {
    color: #e8eaed;
    font-family: "Google Sans Text", Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}

.ug-lightbox__kapat,
.ug-lightbox__ok {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: none;
    border: none;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    cursor: pointer;
    transition: background-color .16s ease;
}
.ug-lightbox__kapat:hover,
.ug-lightbox__ok:hover { background: rgba(255, 255, 255, .28); }
.ug-lightbox__kapat:focus-visible,
.ug-lightbox__ok:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ug-lightbox__kapat[hidden],
.ug-lightbox__ok[hidden] { display: none; }

.ug-lightbox__kapat {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
}

.ug-lightbox__sayac {
    position: absolute;
    inset-block-end: 16px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    color: #bdc1c6;
    font-family: "Google Sans Text", Arial, Helvetica, sans-serif;
    font-size: 13px;
}

@media (max-width: 599px) {
    .ug-lightbox { padding: 12px; gap: 2px; }
    .ug-lightbox__ok { width: 40px; height: 40px; }
    .ug-lightbox__gorsel { max-height: calc(100vh - 160px); }
}

@media (prefers-reduced-motion: reduce) {
    .ug-media__link .ug-media__img,
    .ug-media__zoom { transition: none; }
    .ug-media__link:hover .ug-media__img { transform: none; }
}

/* --- Arama sonuçları --------------------------------------------------------- */
.ug-search {
    box-sizing: border-box;
    max-width: 1440px;
    margin-inline: auto;
    padding: 0 24px;
}
.ug-search__title { margin: 0 0 24px; max-width: 900px; }

.ug-search__form { max-width: 640px; margin-bottom: 40px; }
.ug-search__label {
    display: block;
    margin-bottom: 6px;
    color: #202124;
    font-family: "Google Sans", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 500;
}
.ug-search__row { display: flex; gap: 12px; }
.ug-search__row input {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    color: #202124;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 100px;
    padding: 12px 20px;
    font-family: "Google Sans", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 24px;
}
.ug-search__row input:focus {
    outline: none;
    border-color: #0d652d;
    box-shadow: 0 0 0 3px rgba(13, 101, 45, .14);
}
.ug-search__row button { flex: none; }

.ug-search__not {
    max-width: 640px;
    color: #5f6368;
    font-family: "Google Sans Text", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 24px;
}
.ug-search__not a { color: #0d652d; }

.ug-search__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; max-width: 860px; }

.ug-search__link {
    display: grid;
    gap: 4px;
    padding: 16px 18px;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color .14s ease;
}
.ug-search__link:hover { background: #f1f3f4; text-decoration: none; }
.ug-search__link:focus-visible { outline: 3px solid #0d652d; outline-offset: 2px; }

.ug-search__etiket {
    color: #5f6368;
    font-family: "Google Sans", Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ug-search__baslik {
    color: #1a0dab;
    font-family: "Google Sans", Arial, Helvetica, sans-serif;
    font-size: 19px;
    font-weight: 500;
    line-height: 26px;
}
.ug-search__link:hover .ug-search__baslik { text-decoration: underline; }
.ug-search__yol {
    color: #0d652d;
    font-family: "Google Sans Text", Arial, Helvetica, sans-serif;
    font-size: 13px;
    overflow-wrap: anywhere;
}
.ug-search__ozet {
    color: #5f6368;
    font-family: "Google Sans Text", Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 23px;
}
.ug-search__ozet mark { background: #fef7c3; color: inherit; padding: 0 1px; border-radius: 2px; }

@media (min-width: 600px)  { .ug-search { padding-inline: 48px; } }
@media (min-width: 1024px) { .ug-search { padding-inline: 64px; } }
@media (max-width: 480px) {
    .ug-search__row { flex-direction: column; }
    .ug-search__row button { width: 100%; }
}

/* --- Ürün kartları: kompakt ölçü --------------------------------------------
   Tasarımın kartı 1440px'te 629px yüksekliğinde; dört ürünle sayfanın
   büyük bölümünü kaplıyor. Kompakt kipte kart yüksekliği, iç boşluk ve
   başlık ölçüsü orantılı olarak küçülür — düzen ve renkler aynı kalır. */
/* Kap da daraltılır: kartlar yalnızca alçalmaz, enleri de küçülür.
   Tasarımın kendi ızgarası 1070px genişlikte iki sütundur. */
.ug-tiles--kucuk { max-width: 860px; }

.ug-tiles--kucuk ._card_5126k_130 { min-height: 430px; }

.ug-tiles--kucuk ._content_5126k_244 { padding: 18px 16px; }

.ug-tiles--kucuk ._title_5126k_143 { font-size: 17px; line-height: 24px; }

.ug-tiles--kucuk ._imageWrapper_5126k_227 { aspect-ratio: 519 / 300; }

@media (min-width: 600px) and (max-width: 1023.98px) {
    .ug-tiles--kucuk ._card_5126k_130 { min-height: 470px; }
}
@media (min-width: 1024px) and (max-width: 1439.98px) {
    .ug-tiles--kucuk ._card_5126k_130 { min-height: 440px; }
}
@media (min-width: 1440px) {
    .ug-tiles--kucuk ._card_5126k_130 { min-height: 450px; }
}

/* --- Kahraman başlığının arkasındaki görsel ----------------------------------
   Görsel yalnızca başlık alanının arkasına serilir; alttaki kayan şerit
   etkilenmez. Üstüne beyaz bir perde konur — tasarımın başlığı koyu renk
   olduğu için perdesiz koyu bir görselin üstünde okunmaz kalırdı.
   Yükseklik ve perde yoğunluğu panelden gelir (--ug-hero-bg-* değişkenleri). */
.ug-hero-bg {
    position: relative;
    isolation: isolate;
    min-height: var(--ug-hero-bg-h, 380px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ug-hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--ug-hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Perde: kenarlarda daha yoğun, ortada biraz daha şeffaf — görsel
   tamamen kaybolmadan metin okunur kalır. */
.ug-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 100% at 50% 45%,
            rgba(255, 255, 255, calc(var(--ug-hero-bg-perde, .72) * .82)) 0%,
            rgba(255, 255, 255, var(--ug-hero-bg-perde, .72)) 55%,
            rgba(255, 255, 255, calc(var(--ug-hero-bg-perde, .72) + (1 - var(--ug-hero-bg-perde, .72)) * .45)) 100%);
}

@media (max-width: 767px) {
    /* Dar ekranda görsel daha da alçalır, metin taşmasın */
    .ug-hero-bg { min-height: min(var(--ug-hero-bg-h, 380px), 300px); }
}

@media (prefers-reduced-motion: no-preference) {
    .ug-hero-bg::before { transition: background-position .4s ease; }
}

/* --- Kahraman şeridi: çerçeveli kartlar --------------------------------------
   Tasarımın yuvası "max-width: fit-content" ile görselin oranını izler;
   panelden farklı oranlarda fotoğraf yüklenince şerit düzensiz görünür.
   Bu kipte her görsel eşit kare bir karta oturur, kartlar arasında küçük
   boşluk kalır. Yükseklik yine tasarımın kırılım noktalarından gelir. */
.ug-serit--cerceveli { gap: 16px; }

.ug-serit--cerceveli ._imageWrapper_1w3ne_202 {
    /* Genişlik yükseklikten türetilir: kart her zaman kare */
    width: auto;
    max-width: none;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e8eaed;
    box-shadow: 0 1px 2px rgba(60, 64, 67, .06), 0 6px 18px rgba(60, 64, 67, .10);
    overflow: hidden;
}

/* Görsel kartın içinde tam oturur; kenarlarda beyaz şerit kalmaz */
.ug-serit--cerceveli ._marqueeImg_1w3ne_234,
.ug-serit--cerceveli ._marqueeImg_1w3ne_234 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 599px) {
    .ug-serit--cerceveli { gap: 12px; }
    .ug-serit--cerceveli ._imageWrapper_1w3ne_202 { border-radius: 16px; }
}

/* --- Kahraman görselinin üstündeki metin ------------------------------------
   Perde inceyken görsel baskın olur ve koyu başlık okunmaz. Şablon o durumda
   --ug-hero-metin değişkenini gönderir; değişken yoksa tasarımın kendi rengi
   kullanılır, yani perdesi yüksek kurulumlar etkilenmez.                     */
.ug-hero-bg ._title_1w3ne_140,
.ug-hero-bg .ug-rotator-line {
    color: var(--ug-hero-metin, inherit);
    text-shadow: var(--ug-hero-golge, none);
}

/* --- Dönen kelimeler başlığın altında ---------------------------------------
   Şerit başlığın üstündeyken altına boşluk bırakıyordu; aşağı alınınca o
   boşluk üste geçmeli, yoksa başlığa yapışık duruyor.                        */
.ug-rotator-wrap--alt { margin-bottom: 0; margin-top: 24px; }

@media (max-width: 767px) {
    .ug-rotator-wrap--alt { margin-top: 16px; }
}

/* --- Tıklanabilir şerit görselleri ------------------------------------------
   Şerit yuvası bağlantı taşıdığında <div> yerine <a> basılır. Sınıf aynı
   kaldığı için yerleşim değişmez; burada yalnızca bağlantının blok gibi
   davranması, metin biçimini devralmaması ve tıklanabilir olduğunun
   sezilmesi sağlanır.                                                        */
.ug-serit-bag {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}

.ug-serit-bag:hover,
.ug-serit-bag:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}

.ug-serit-bag:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* Dokunmatik cihazda hover kalıcı takılmasın. */
@media (hover: none) {
    .ug-serit-bag:hover { transform: none; box-shadow: none; }
}

/* Hareketi azalt tercihi açıksa yükselme animasyonu uygulanmaz. */
@media (prefers-reduced-motion: reduce) {
    .ug-serit-bag { transition: none; }
    .ug-serit-bag:hover, .ug-serit-bag:focus-visible { transform: none; }
}