/* --- FONT & TEMEL AYARLAR --- */
@font-face {
  font-family: 'KeyzhaFont';
  src: url('fonts/KEYZHA.woff2') format('woff2');
}
html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #e9ebee;
}

/* --- MASAÜSTÜ ANA YAPI (FLEXBOX) --- */
.main-container {
    display: flex;
    height: 100vh;
    overflow: hidden; /* Masaüstünde kaydırmayı engelle */
}

/* --- SOL PANEL: AYARLAR --- */
.arac-paneli {
    flex: 0 0 380px;
    background-color: #ffffff;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    z-index: 10;
    display: flex;
    flex-direction: column;
    height: 100vh;
    box-sizing: border-box;
}

.panel-header, .panel-footer {
    padding: 25px;
    flex-shrink: 0;
    text-align: center;
}
.panel-footer {
    border-top: 1px solid #e9ebee;
}
.panel-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0 25px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.kontrol-grup { display: flex; flex-direction: column; gap: 10px; }
.kontrol-grup label { font-weight: 600; color: #333; font-size: 15px; text-align: left; }
textarea#kullaniciMetni {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    resize: vertical;
    box-sizing: border-box;
}
.arac-paneli button {
    padding: 12px 18px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px;
    cursor: pointer; background-color: #f7f7f7; transition: all 0.2s;
}
.arac-paneli button:hover { background-color: #e9e9e9; border-color: #bbb; }
#olusturBtn { background-color: #007bff; color: white; border: none; font-weight: bold; }
#olusturBtn:hover { background-color: #0056b3; }

.secim-butonlari { display: flex; gap: 10px; }
.secim-butonlari button { flex-grow: 1; }
.secim-butonlari button.aktif {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* --- SAĞ PANEL: ÖNİZLEME --- */
.onizleme-alani {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    overflow: auto;
}
.a4-sayfasi-dis-cerceve {
    background-color: #ffffff;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    box-sizing: border-box;
    padding: 1cm;
    transform-origin: center center;
    transform: scale(0.8);
}
.a4-sayfasi-dis-cerceve.yatay { width: 29.7cm; height: 21cm; }
.a4-sayfasi-dis-cerceve.dikey { width: 21cm; height: 29.7cm; }
.a4-sayfasi {
    width: 100%; height: 100%; border: 1px dashed #ccc;
    position: relative; overflow: hidden;
}
.suruklenebilir {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    cursor: move; user-select: none; width: auto; text-align: center; padding: 10px;
    font-family: 'KeyzhaFont', sans-serif; font-size: 100px;
    color: #000; white-space: pre-wrap; line-height: 1.1;
}

/* --- LİNKLER VE ŞIK BUTONLAR --- */
.isiltili-link { text-decoration: none; }
.yesil-buton, .isiltili-buton {
    position: relative; overflow: hidden; width: 100%;
    background: linear-gradient(45deg, #ff007b, #ff9400, #fffa00, #3cff00, #00d5ff, #a700ff);
    background-size: 400%; color: white; font-weight: bold;
    border: none; animation: gradient-animation 10s infinite alternate;
}
.yesil-buton::before, .isiltili-buton::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 75%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-30deg); animation: shimmer-animation 3s infinite;
}
@keyframes gradient-animation { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes shimmer-animation { 0% { left: -100%; } 100% { left: 200%; } }


/**************************************************/
/* MOBİL UYUMLULUK KODLARI (991px ve altı için) */
/**************************************************/
@media (max-width: 991px) {
    html, body {
        height: auto;
        overflow: auto;
    }
    .main-container {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }
    .arac-paneli {
        flex-basis: auto;
        height: auto;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .onizleme-alani {
        padding: 20px 10px;
    }
    .a4-sayfasi-dis-cerceve {
        width: 95vw;
        height: auto;
        padding: 5px;
        transform: scale(1);
    }
    .a4-sayfasi-dis-cerceve.yatay {
        aspect-ratio: 297 / 210;
    }
    .a4-sayfasi-dis-cerceve.dikey {
        aspect-ratio: 210 / 297;
    }
    .suruklenebilir {
        font-size: 12vw;
    }
}


/**************************************************/
/* YAZDIRMA STİLLERİ (DÜZELTİLMİŞ HALİ) */
/**************************************************/
@media print {
    /* Önce vücuttaki her şeyi görünmez yap */
    body * {
        visibility: hidden;
    }
    /* Sonra, sadece önizleme alanını ve içindekileri görünür kıl */
    .onizleme-alani, .onizleme-alani * {
        visibility: visible;
    }
    /* Google AdSense ve Tüm Reklam Elemanlarını Yazdırmada Kesin Olarak Yok Et */
    .adsbygoogle,
    ins.adsbygoogle,
    .google-auto-placed,
    .adsbygoogle-noablate,
    iframe[id^="google_ads_iframe"],
    iframe[id^="aswift"],
    iframe[name^="google_ads_iframe"],
    iframe[name^="aswift"],
    div[id^="google_ads_iframe"],
    div[id^="aswift"],
    div[id*="google_ads"],
    #google_top_masthead_container,
    [data-google-query-id],
    [data-ad-client],
    [data-ad-slot],
    [data-ad-format],
    .ad-container,
    .ad-banner,
    .ad-slot,
    .reklam,
    .reklam-alani {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: hidden !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
    }
    /* Önizleme alanını sayfanın en üstüne yerleştir ve tam ekran yap */
    .onizleme-alani {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }
    .a4-sayfasi-dis-cerceve {
        transform: scale(1); /* Ölçeklendirmeyi iptal et */
        box-shadow: none;
        border: none;
        width: 100%;
        height: 100vh;
        padding: 1cm; /* Kenar boşluğunu koru */
        box-sizing: border-box;
    }
    .a4-sayfasi {
        border: none;
    }
}