#global-drawing-layer, .magazine, .nav-button, .color-circle, .neu-btn, .mode-switch-track {
    touch-action: none !important; 
}


/* ==========================================================
   GENEL VE ARKA PLAN AYARLARI
   ========================================================== */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden !important; /* Tarayıcı scrollbarını devre dışı bırak */
    background-color: #222;
    cursor: default;
}



body {
    font-family: 'Segoe UI', Arial, sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body.zoom-mode .p-edge, 
body.zoom-mode .flip-control, 
body.zoom-mode .p-peeling {
    pointer-events: none !important; /* Tıklamayı alt katmana geçirir */
    visibility: hidden !important;   /* Görünmez yapar */
}

/* Sürükleme sırasında metin seçilmesini engellemek için */
body.zoom-mode {
    user-select: none;
    -webkit-user-select: none;
}

/* Gölgeleri de tamamen kapatır */
body.zoom-mode .magazine .shadow,
body.pen-mode .magazine .shadow {
    display: none !important;
}

/* Butonlara tıklandığında veya odaklanıldığında çıkan çerçeveyi kaldırır */
.alt-nav-button:focus,
.alt-nav-button:active,
#prev-button:focus,
#next-button:focus {
    outline: none !important;
    box-shadow: none !important;
   
}

/* Tüm butonlar için genel bir temizlik (opsiyonel) */
button:focus {
    outline: none;
   
}
   /* Metin Seçimini Global Olarak Devre Dışı Bırakma */
body, 
.magazine, 
.magazine * {
    /* Tüm modern tarayıcılar için */
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none;         /* Standart */
    
    /* Seçim imlecini (cursor) metin imleci yerine varsayılan imleç yap */
    cursor: default;
}



#alt-bar {
    /* Mevcut fixed ve z-index ayarları korunuyor */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 45px; 
    background-color: #333;
    z-index: 999999 !important;
    /* Flexbox kullanarak içeriği 3 parçaya böl */
    display: flex;
    justify-content: space-between; /* Kenarlara yay */
    align-items: center; /* Dikeyde ortala */
    margin-top: 7px;
}


/* =========================
   ÜST BAR - SOL LOGO
========================= */
#alt-bar-left {
    display: flex;
    align-items: center;
    height: 100%;
    flex: 1; /* Boş alanı eşit olarak doldurur */
  
}


#alt-bar-right {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* En sağa yasla */
    align-items: center;
    padding-right: 0; /* Kenar boşluğunu sıfırladık */

}

#fullscreen-button {
    font-size: 22px; /* Kare ikonun boyutu */
    margin-right: 5px;
}



#zoom-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

#zoom-container {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

#zoom-container svg {
    width: 22px; 
    height: 22px;
    stroke: #ccc; /* Normal renk (Gri/Beyaz arası) */
    transition: stroke 0.2s ease;
    pointer-events: none;
}

#zoom-button:hover svg {
    stroke: #ffffff; /* Üzerine gelince tam beyaz olsun */
}
/* ==========================================================
   DİKEY ORTALANMIŞ NAVİGASYON BUTONLARI
   ========================================================== */

.alt-nav-button {
    background: none;
    border: none;
    color: #ccc;
    font-size: 19px; /* İkon boyutunu biraz küçülterek daha zarif yapabiliriz */
    cursor: pointer;
    transition: color 0.2s, transform 0.1s;
    z-index: 9999 !important;
    /* DİKEY VE YATAY ORTALAMA İÇİN FLEXBOX */
   
    align-items: center;      /* Dikeyde tam orta */
    justify-content: center;   /* Yatayda tam orta */
    
    width: 30px;  /* Butona kare bir alan veriyoruz */
    height: 30px; /* Yükseklik vererek dikey merkezlemeyi garantiliyoruz */
    padding: 0;   /* Varsayılan boşlukları sıfırla */
    line-height: 0; /* Satır yüksekliği kaynaklı kaymaları engelle */
    vertical-align: middle;
}

/* Panel içindeki elemanların hizalanması */
#alt-bar-center {
    flex: 0 1 auto;
    display: flex;
    align-items: center; /* Tüm elemanları barın ortasına hizala */
    gap: 2px; 
    z-index: 9999 !important;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 2px 12px;
    border-radius: 20px;
    height: 30px; /* Panelin toplam yüksekliğini sabitleyelim */
}

.alt-nav-button:hover {
    color: white;
    z-index: 9999 !important;
    transform: scale(1.2); /* Üzerine gelince hafif büyüme */
}

/* SABİT GENİŞLİKLİ SAYFA NUMARASI ALANI */
#page-number-display {
    font-size: 11px;
    font-family: 'Arial', Courier; /* Karakter genişliği sabit font */
    font-weight: bold;
   
    text-align: center;
    align-items: center;
    color: #ccc;
    /* BURASI KRİTİK: Numara değiştikçe butonların kaymasını engeller */
    min-width: 150px; 
    display: inline-block;
    padding: 2 12;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 3px;
    z-index: 999 !important;
    
}
#ust-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 45px; 
    background-color: #333;
    z-index: 999999 !important;

	/* Flexbox kullanarak içeriği ortala */
    display: flex;             /* Flexbox'ı etkinleştir */
    justify-content: center;   /* Yatayda (x ekseni) ortala */
    align-items: center;       /* Dikeyde (y ekseni) ortala */
}

.ust-bar-text {
    color: #999;
    font-size: 11px;
    letter-spacing: 0.5px;
}

#ust-bar-left img {
    height: 40px;          /* üst bar yüksekliğine uygun */
    width: auto;
    margin-left: 12px;
    user-select: none;
    pointer-events: none;  /* sayfa çevirme / çizimi bozmasın */
}

#ust-bar-left {
    flex: 1; /* Boş alanı eşit olarak doldurur */
    height: 100%;
   
}


/* ==========================================================
   FLIPBOOK ORİJİNAL MANUEL KONUMLANDIRMASI
   (JS tarafından yönetilen statik değerler korunur)
   ========================================================== */

/* #canvas konteyneri (eğer HTML'de varsa) sadece görüntüleme alanı olarak kalmalı */
#canvas {
    position: fixed; 
    top: 0; /* Üst barın arkasına geçmesi için 0 yapıldı */     
    bottom: 0;  
    left: 0;
    right: 0;
    display: flex; 
    justify-content: center;
    align-items: center;   
    z-index: 10;
    /* Görsel yolu paketleme uyumlu hale getirildi */
    background-image: url('../icon/pxfuel.jpg');
    background-size: cover;          
    background-repeat: no-repeat;    
    background-color: #333; 
}

.magazine-viewport {
    overflow: visible !important;

}

.magazine-viewport .container {
    /* Orijinal statik merkezleme değerleri korunuyor */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1400px;
    height: 540px;
    margin: auto;

}

.magazine-viewport .magazine {
    /* Orijinal statik konumlandırma değerleri korunuyor */
    width: 1400px; 
    height: 540px;
    left: 50%;
    top: 50%;
}

.magazine-viewport .page {
    width: 700px;
    height: 540px;
    background-color: white;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    
}

/* ==========================================================
   DİĞER ÖZELLİKLER
   ========================================================== */


/* Sayfa Gölgeleri */
.magazine .even .gradient{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:-webkit-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
    background-image:linear-gradient(to right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
 
}


.magazine .odd .gradient{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:-webkit-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
    background-image:linear-gradient(to left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
 
}

.magazine-viewport .loader{
    background-image:url(../pics/loader.gif);
    width:22px;
    height:22px;
    position:absolute;
    top:50%; /* Orijinal statik konum */
    left:50%; /* Orijinal statik konum */
}

/* 
.magazine-viewport .shadow{
    -webkit-transition: -webkit-box-shadow 0.5s;
    transition: box-shadow 0.5s;
    -webkit-box-shadow:0 0 20px #474747;
    box-shadow:0 0 20px #474747;
}
*/

.animated{
    -webkit-transition:margin-left 0.5s;
    transition:margin-left 0.5s;
}

.exit-message{
    position: absolute;
    top:10px;
    left:0;
    width:100%;
    height:40px;
    z-index:10000;
}

.exit-message > div{
    width:140px;
    height:30px;
    margin:auto;
    background:rgba(0,0,0,0.5);
    text-align:center;
    font:12px arial;
    line-height:30px;
    color:white;
    -webkit-border-radius:10px;
    border-radius:10px;
}

/* ==========================================================
   YENİ YARI ELİPS NAVİGASYON BUTONLARI
   ========================================================== */

.nav-button {
    position: fixed; 
    top: 50%;
    transform: translateY(-50%); 
    
    width: 2vw; 
    height: 25vw; 
    
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    cursor: pointer;
    z-index: 10005;
    outline: none;
    transition: background-color 0.2s;
    
    /* MERKEZLEME BURADA BAŞLAR */
    display: flex;
    align-items: center;    /* Dikey merkezi sağlar */
    justify-content: center;  /* Yatay merkezi sağlar */
}

.arrow-char {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2vw;
    line-height: 0; 
    transform: scaleY(4) scaleX(2); 
    transform-origin: center; 
    margin-top: -2vw;
}

#prev-button { 
    left: 0; 
    border-top-right-radius: 200px;
    border-bottom-right-radius: 200px;
    z-index: 10000;
    
}

#next-button { 
    right: 0; /* Sağ Kenara Sıfırla */
    /* Yarı Elips Şekli: Sağdaki kenarı yuvarla */
    border-top-left-radius: 200px;
    border-bottom-left-radius: 200px;
    z-index: 10000;
  
}

.nav-button:hover { 
    background-color: rgba(0, 0, 0, 0.8); 
}


/* Sayfa bazlı kanvaslar */
.page-drawing-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 13000; /* Sayfa içeriğinin hemen üstünde */
    pointer-events: none; /* Kalem kapalıyken her şeyi alt katmana geçirir */
}

/* Kalem modu açıkken sadece çizim kanvası tıklamaları yakalar */
body.pen-mode .page-drawing-canvas {
    pointer-events: auto;
    cursor: none;

}

/* ==========================================================
   TAKİPÇİ EMOJİ İMLEÇ (DİNAMİK)
   ========================================================== */
#custom-cursor {
    position: fixed;
    pointer-events: none; 
    z-index: 100000;
    display: none;
    font-size: 28px;
    line-height: 1;
    transition: none !important;
    /* Kalem ucunu fareye hizalamak için varsayılan değer */
    transform: translate(-4px, -28px);
   
    
}

/* ==========================================================
   MOUSE PANELİ 
   ========================================================== */

.touchpad-container {
    position: fixed;
    bottom: 40px;
    right: 40px; 
    width: 250px;
    background: #fdfdfd;
    border-radius: 20px;
    padding: 8px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
    z-index: 200000; /* Çizim panelinin de üstünde dursun */
    display: flex;
    flex-direction: column;
    touch-action: none;
    border: 1px solid rgba(255,255,255,0.9);
}

#virtual-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none !important; /* İmleç kendini engellemesin */
    z-index: 10000000;
    font-size: 28px;
    color: white;
    text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    display: none;
    line-height: 1;
    user-select: none;
}

#virtual-cursor span {
    display: inline-block;
    /* Ok ikonunu biraz döndürerek gerçek mouse açısına getiriyoruz */
    transform: rotate(-120deg); 
}

/* Bağımsız buton aktifken uygulanacak stil */
.independent-tool.active-tool {
    box-shadow: inset 3px 3px 6px #d1d1d1, inset -3px -3px 6px #ffffff;
    border: 1px solid #e30505 !important;
    
    animation: pulse-border 2s infinite;
}

.mouse-btn {
    flex: 1;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 1px solid #ffffff;;
    background: #f0f0f0;
    box-shadow: 2px 2px 10px #acabab, -5px -5px 10px #e9e9e5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    cursor: pointer;
    
}
.touchpad-header {
    height: 22px;
    background: #eeeeee;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4px;
    cursor: grab;
}

.touchpad-header:active { cursor: grabbing; }

.drag-dots { display: grid; grid-template-columns: repeat(4, 3px); gap: 3px; }
.drag-dots span { width: 2.5px; height: 2.5px; background: #999; border-radius: 50%; }

.touchpad-content { display: flex; gap: 10px; height: 150px; }

.tp-gray-box {
    flex: 2.5;
    background: #aaaaaa;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 10px;
    cursor: crosshair;
    user-select: none;
}

.tp-green-box {
    flex: 0.9;
    background: #4caf50;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 2px 4px 10px rgba(76, 175, 80, 0.3);
    transition: transform 0.1s;
}

.tp-green-box:active { transform: scale(0.92); }

.tp-label-bottom { color: #555; font-weight: bold; font-size: 12px; letter-spacing: 1px; }
.tp-label-center { color: #fff; font-weight: bold; font-size: 14px; }


/* TAŞIMA TUTAMACI (2x3 Nokta Izgarası) */
.panel-header-modern {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0; /* Üst ve alt boşluk azaltıldı */
    cursor: grab;
    width: 100%;
    border-bottom:1px inset #ccc;
}

.drag-handle-grid {
    display: grid;
    /* Noktalar 3px'e düşürüldü */
    grid-template-columns: repeat(2, 3px); 
    grid-template-rows: repeat(3, 3px);
    /* Noktalar arası mesafe daraltıldı */
    gap: 3px; 
}

.drag-handle-grid span {
    width: 3px;
    height: 3px;
    background-color: #cccccc; /* Daha yumuşak bir gri */
    border-radius: 50%;
    display: block;
    opacity: 0.8; /* Hafif transparanlık daha modern gösterir */
}


.panel-header-modern:active { cursor: grabbing; }

/* Ayraç Çizgisi */
.panel-divider {
    height: 1px;
    background: linear-gradient( #c7c7c7, transparent);
    width: 100%;
    margin: 12px auto;
}

/* SES BÖLÜMÜ - TAM MERKEZLİ */
.volume-outer-box {
    background: #f0f0f0;
    border-radius: 10px;
    padding: 4px 0 10px 0;
   
    margin: 13px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.volume-inner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 15px;
}

.icon-vol {
    font-size: 1.5rem;
    color: #555;
    line-height: 1;
}

.neu-range {
    accent-color: #e91e63;
    width: 85%;
    height: 4px;
    background: #ccc;
    border-radius: 5px;
    outline: none;
}

.neu-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: #e91e63 !important;
    border-radius: 50%;
    cursor: pointer;
    
}

/* Kalınlık ve Diğer Elemanlar */
.neumorph-inset {
    background: #f0f0f0;
    border-radius: 20px;
    box-shadow: inset 3px 3px 5px #d1d1d1, inset -5px -5px 12px #ffffff;
    padding: 6px 5px;
    margin: 10px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.size-dot { background: #444; margin-top: 4px; border-radius: 50%; cursor: pointer; transition: 0.2s; }
.dot-sm { width: 9px; height: 9px; }
.dot-md { width: 14px; height: 14px; }
.dot-lg { width: 24px; height: 24px; }
.size-dot.active { background: #e91e63; transform: scale(1.2); }

/* Butonlar ve Renkler */
.tool-row-modern {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    margin: 15px 0;
}

.neu-btn, .clear-btn, .undo-btn {
    flex: 1;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 1px solid #ffffff;;
    background: #f0f0f0;
    box-shadow: 2px 2px 10px #acabab, -5px -5px 10px #e9e9e5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    cursor: pointer;
    
}
.neu-btn:hover, .color-circle:hover, .size-dot:hover, .clear-btn:hover, .undo-btn:hover, .mouse-btn:hover {
    transform: scale(1.1); 
    z-index: 5;
    
 
}

/* Seçilen renk dairesi için nabız/dalga efekti */
.active-color {
    border: 3px solid white !important; /* Beyaz bir iç halka */
    outline: 2px solid #e91e63; /* Seçilen rengin ana hattı */
    animation: color-pulse 1.5s infinite;
    transform: scale(1.1); /* Seçileni hafif büyüt */
}

@keyframes color-pulse {
    0% { box-shadow: 0 0 0 0 rgba(233, 30, 99, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(233, 30, 99, 0); }
    100% { box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); }
}

.active-tool {
    box-shadow: inset 3px 3px 6px #d1d1d1, inset -3px -3px 6px #ffffff;
    border: 1px solid #e30505 !important;
    
    animation: pulse-border 1.5s infinite;

}
@keyframes pulse-border {
    0% { box-shadow: 0 0 0 0 rgba(241, 9, 5, 0.7); }
    70% { box-shadow: 0 0 0 7px rgba(52, 152, 219, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); }
}
.color-grid-modern {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.color-circle {
    border: 2px solid white;
    aspect-ratio: 1/1;
    border-radius: 8px;
    box-shadow:  -2px -2px 10px #e9e9e5, 2px 2px 5px #8b8b8b;
    cursor: pointer;
    
}

/* MOD CONTAINER - MERKEZLEME */
.mode-container-centered {
    display: flex;
    justify-content: center;
    padding: 4px 0;
    width: 100%;
}


/* Sabit Arka Plan İkonları */
.bg-icon {
    
    position: absolute;
    font-size: 22px;
    opacity: 0.6;
    user-select: none;
}
.left-bg { left: 10px; margin-top: 5px; }
.right-bg { right: 10px; margin-top: 5px; }

/* GENİŞLETİLMİŞ YUVA (TRACK) */
.mode-switch-track {
    width: 120px;      /* Genişlik artırıldı */
    height: 39px;     /* Yükseklik dengelendi */
    background: rgba(0, 0, 0, 0.1); 
    border-radius: 25px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
}



/* Çizim modu aktifken arka plan SARI */
.mode-switch-track.paint-mode {
    background: #ffeb3b; 
}

/* BÜYÜTÜLMÜŞ BUTON (THUMB) */
.mode-thumb {
    width: 36px;      /* Buton biraz daha büyütüldü */
    height: 36px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    left: 2px;        /* Sol boşluk */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    /* Akıcı kayma animasyonu */
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 2;
}

/* SAĞA KAYMA HESABI (Dışarı taşmaz) */
.mode-switch-track.paint-mode .mode-thumb {
    /* Track(95) - Thumb(30) - (Left Boşluk(3)*2) = 59px */
    transform: translateX(80px); 
}

/* İKONLAR */
.mode-icon {
    position: absolute;
    font-size: 1.1rem; /* İkonlar biraz daha belirgin */
    transition: opacity 0.2s;
    pointer-events: none;
    margin-top: 6px;
}

.paint-icon { opacity: 0; }
.mode-switch-track.paint-mode .hand-icon { opacity: 0; }
.mode-switch-track.paint-mode .paint-icon { opacity: 1; }

.sound-btn-sync {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.sound-btn-sync:active {
    transform: scale(0.9);
}

.sound-icon {
    font-size: 24px;

}

.sound-icon:hover {
    transform: scale(1.1);

}

#sound-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

#sound-toggle:hover {
    opacity: 0.8;
    
}

.custom-tooltip {
    position: absolute;
    background: rgba(20, 20, 20, 0.95);
    color: #fff;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 13px;
    pointer-events: none;
    z-index: 10000;
    white-space: nowrap;
    display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.custom-tooltip::after {
    content: "";
    position: absolute;
    bottom: 100%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent rgba(20, 20, 20, 0.95) transparent;
}



.interaktif {
    transition: opacity 0.2s ease-in-out; /* 0.2 saniye çok daha seridir */
    z-index: 100000 !important;
    
}


.video-buton {
    position: absolute;
    padding: 28px;
    padding-right: 55px;
    background-color: rgba(255, 0, 0, 0.01);
    border-bottom-left-radius: 41%;
    border-top-left-radius: 41%;
    border: none;
    cursor: pointer;
     touch-action: auto !important;
    /* TURN.JS'İN ASLA ULAŞAMAYACAĞI YER: */
    z-index: 999999999 !important;
    pointer-events: auto !important; 
   
}


/* Tıklandığında küçük bir tepki (Opsiyonel) */
.video-buton:active {
    transform: scale(0.9);
    background-color: rgba(255, 255, 255, 0.1);
}

/* Video Popup Tasarımı - Mevcut yapını koruyan ve local videoyu düzelten versiyon */
.video-window {
    position: fixed !important;
    top: 20%;
    left: 27%;
    width: 45vw;
    background: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    z-index: 2147483647 !important;
    border: 1px solid #333;
    transform: none !important;
}

.video-window-header {
    background: #252525;
    color: #ececec;
    padding: 6px 4px;
    height: 1vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: default;
    user-select: none;
    border-bottom: 1px solid #333;
}

/* LOCAL VIDEO DÜZELTMESİ: height: 100% yerine auto ve pozisyon ayarı */
#local-video-player {
    width: 100% !important;
    height: auto !important; /* height: 100% yerine auto yerel videoda hayat kurtarır */
    display: block !important;
    object-fit: contain;
    position: absolute; /* Kapsayıcıdaki padding-bottom içinde görünmesi için şart */
    top: 0;
    left: 0;
}

.window-title {
    font-size: 0.9vw;
    font-weight: 0.25vw;
    text-transform: uppercase;
    font-family: sans-serif;
    opacity: 0.7;
}

.window-close-btn {
    font-size: 2vw;
    cursor: pointer;
    color: #888;
    line-height: 1;
    transition: color 0.2s;
    margin-top: -5px;
}

.window-close-btn:hover {
    color: #ff4444;
}

/* HEM IFRAME HEM LOCAL VIDEO İÇİN ORTAK KAPSAYICI */
.video-window-body {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 oranını korur */
    height: 0;
    background: #000;
}

/* Local video ve Iframe artık aynı hizada */
.video-window-body iframe, 
.video-window-body #local-video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* --- SES PENCERESİNE ÖZEL STİLLER --- */
.custom-audio-container {
    position: fixed !important;
    bottom: 65px;
    background: #333;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    border: 1px solid #333;
    z-index: 2147483647 !important;
    width: 410px;
    height: 64px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: move;
    user-select: none;
    transform: none !important;
}

/* Kapatma Butonu */
.custom-audio-close {
    position: absolute;
    top: -15px;
    right: -12px;
    background: #ff5722;
    color: white;
    border: 3px solid #ffffff;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 10;
    transition: transform 0.1s, background 0.2s;
    padding-top: 3px;
}
.custom-audio-close:hover {
    background: #d93806;
    transform: scale(1.1);
}

/* --- OYNAT / DURDUR BUTONU (KUSURSUZ ORTALAMA) --- */
.c-play-btn {
    background: #43aa8b;
    color: white;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    /* Font boyutunu büyütüp esnek hizalama ekliyoruz */
    font-size: 24px; 
    display: flex;
    align-items: center;
    justify-content: center;
   
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    
    /* Göz yanılsamasını ve karakterin sol/üst basıklığını düzeltmek için hafif sağa çekiyoruz */
    padding-left: 7px; 
    padding-top: 0px;
}



.c-play-btn:active {
    transform: scale(0.92);
}

/* İçerik Alanı */
.custom-audio-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    overflow: hidden;
}

.audio-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#custom-audio-title {
    font-size: 13px;
    font-weight: bold;
    color: #ffffffb6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 210px;
}

.c-time {
    font-size: 11px;
    color: #ffffffb6;
    font-weight: 600;
    flex-shrink: 0;
}

/* İlerleme Çubuğu */
.custom-progress-container {
    width: 100%;
    height: 7px;
    background: #edf2f2;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 1px solid #d1dedb;
}

.custom-progress-bar {
    width: 0%;
    height: 100%;
    background: #43aa8b;
    border-radius: 4px;
}

/* 1. YATAY EKRAN UYARISI (Tüm ekranı kaplayan siyah ekran) */
#orientation-warning {
    display: none; 
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: #1a1a1a;
    color: white;
    z-index: 99999999;
    text-align: center;
    flex-direction: column;
    
    /* İÇERİĞİ YUKARI ALMAK İÇİN: */
    justify-content: flex-start; 
    padding-top: 20vh; /* Ekranın %20'lik üst kısmından başlar */
    
    font-family: 'Segoe UI', sans-serif;
}
/* 2. CİHAZ YAN ÇEVRİLDİĞİNDE UYARIYI GÖSTER */
@media only screen and (max-device-width: 932px) and (orientation: landscape) and (any-pointer: coarse) {
    #orientation-warning {
        display: flex !important;
    }
    .modern-panel {
        display: none !important;
    }
}

/* ==========================================================
   MODERN NEUMORPHIC ÇİZİM PANELİ - TAM SÜRÜM
   ========================================================== */

.modern-panel {
    width: 210px;
    height: auto;          
    max-height: calc(100vh - 90px); /* <-- GÜNCELLENDİ: PC'de de barlara taşmasını engeller */
    background: #e9e9e5;
    border-radius: 27px;
    padding: 0 15px 15px 15px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 45px; 
    left: 40px;
    z-index: 1000000;
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
    overflow: hidden;
    user-select: none;
    -webkit-user-drag: none;
}

.modern-panel::-webkit-scrollbar { display: none; }

/* ==========================================================
   ÇİZİM PANELİ & BUTONLARIN YERLEŞİM SİSTEMİ
   ========================================================== */

/* 1. Panel Varsayılan Durumu (Masaüstü için serbest/görünür veya varsayılan) */
#drawing-panel.modern-panel {
    position: fixed;
    left: 40px;                   
    z-index: 1000000;
}

/* 2. Mobil ve Masaüstü Butonlarının Varsayılan Ayarları */
#mobile-panel-toggle {
    display: none; /* Varsayılan gizli, sadece mobilde açılacak */
}

/* ==========================================================
   BÜYÜK EKRAN PANEL İÇİ KAPA / GİZLE BUTONU
   ========================================================== */
#desktop-panel-toggle {
    position: absolute;
    top: -15px;
    right: -25px;
    width: 50px;
    height: 50px;
    background: #e9e9e5;
    color: #e91e63;
    border-radius: 50%;
    font-size: 24px;

    z-index: 1000003;
    border: none !important;
    outline: none !important;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    animation: color-pulse 1.6s infinite; 
}

@keyframes color-pulse {
        0% { box-shadow: 0 0 0 0 rgba(233, 30, 99, 0.7); }
        70% { box-shadow: 0 0 0 10px rgba(233, 30, 99, 0); }
        100% { box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); }
    }

/* Masaüstü Sol Alttaki Açma Butonu (Dalgalanma Eklendi) */
#desktop-open-toggle {
    position: fixed;
    bottom: 50px;
    left: 15px;
    width: 55px;
    height: 55px;
    background: #fff;
    color: #333;
    border-radius: 50%;
    font-size: 28px;
    z-index: 1000002;
    border: none !important;
    outline: none !important;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    animation: color-pulse 1.6s infinite; 
}

/* Mobilde büyük ekran butonlarını tamamen gizle */
@media only screen and (max-width: 768px) {
    #desktop-panel-toggle, #desktop-open-toggle {
        display: none !important;
    }
}

/* ==========================================================
   MODERN MOBİL PANEL & KAYAR BUTON SİSTEMİ
   ========================================================== */
@media only screen and (max-width: 768px) {
    /* 1. Sağ alt bar butonlarını söküp sağ üste sabitle */
    #alt-bar-right {
        position: fixed !important;
        top: 0 !important;
        right: 10px !important;
        bottom: auto !important;
        width: auto !important;
        height: 45px !important; /* ust-bar yüksekliği ile aynı */
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        background: transparent !important;
        z-index: 1000001 !important; /* ust-bar'ın hemen üstü */
        padding-right: 5px !important;
        flex: none !important;
    }

    /* 2. Butonların mobilde daha rahat tıklanması için ayarlar */
    #alt-bar-right .alt-nav-button {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* 3. Alt barın ortasındaki sayfa navigasyonunu mobilde genişlet */
    #alt-bar-center {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 70% !important; /* Butonlar gidince merkeze yayılsın */
        justify-content: center !important;
        min-width: unset !important;
    }

    .alt-nav-button {
        background: none;
        border: none;
        color: #ccc;
        font-size: 24px;
        cursor: pointer;
        transition: color 0.2s, transform 0.1s;
        z-index: 9999 !important;
        align-items: center; 
        justify-content: center; 
        width: 30px; 
        height: 30px; 
        padding: 0; 
        line-height: 0; 
        vertical-align: middle;
    }
    
    /* 4. MODERN PANEL (Mobilde solda gizli başlar) */
    .modern-panel {
        left: -240px !important;
        width: 200px !important; 
        top: 45px !important;            /* Mobilde üstten boşluk */
        bottom: 45px !important;         /* Mobilde alttan boşluk */
        height: auto !important;
        transform: none !important;      /* Masaüstündeki dikey ortalamayı mobilde iptal eder */
        position: fixed !important;
        border-radius: 0 30px 30px 0 !important;
        padding: 10px 15px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-evenly !important;
        gap: 5px !important;
        z-index: 999999 !important;
        overflow: hidden !important;
        transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .modern-panel.active-mobile {
        left: 0 !important;
    }

    .active-button {
        border: 3px solid white !important; /* Beyaz bir iç halka */
        outline: 2px solid #e91e63; /* Seçilen rengin ana hattı */
        animation: color-pulse 1.5s infinite;
        transform: scale(1.1); /* Seçileni hafif büyüt */
    }

    

    /* Mobildeki Açma Butonu (Dalgalanma Eklendi) */
    #mobile-panel-toggle {
        display: flex !important;
        position: fixed;
        bottom: 50px;
        left: 15px;
        width: 55px;
        height: 55px;
        background: #fff;
        color: #333;
        border-radius: 50%;
        font-size: 28px;
        z-index: 1000002;
        border: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
        box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
        justify-content: center;
        align-items: center;
        cursor: pointer;
        animation: color-pulse 1.6s infinite; /* <-- Kırmızı dalgalanma efekti */
        transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s, color 0.3s !important;
    }
    

    /* Panel açıldığında butonun yeni konumu */
    #mobile-panel-toggle.active-mobile-toggle {
        left: 235px !important;
    }

    /* İçerik Sıkıştırma */
    .panel-header-modern { display: none !important; }
    .tool-row-modern { display: flex !important; justify-content: center !important; gap: 6px !important; }
    .neu-btn, .clear-btn, .undo-btn, .mouse-btn { width: 45px !important; height: 45px !important; font-size: 18px !important; }
    .color-grid-modern { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
    .color-circle { width: 38px !important; height: 38px !important; }
    .mode-thumb { width: 36.5px !important; height: 34px !important; }

    .video-window {
        width: 90vw !important;
        /* Ekranın tam ortasına sabitleme */
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        
      
        
        border-radius: 12px;
        position: fixed !important;
    }

    .video-window-header {
        padding: 12px 15px !important; /* Kapatma butonu için daha geniş alan */
    }

    .window-title {
    font-size: 2.5vw;
    font-weight: 0.5vw;
    
    text-transform: uppercase;
    font-family: sans-serif;
    opacity: 0.7;
    }

    .window-close-btn {
        font-size: 6vw;
        cursor: pointer;
        color: #888;
        line-height: 1;
        transition: color 0.2s;
        margin-top: -5px;
    }
}

/* --- 1. ANA SAYFA GÖSTERGE BUTONU (ALT BARDAKİ) --- */
.clickable-page {
    cursor: pointer;
    padding: 6px 15px;
    background: transparent;
    border-radius: 20px;
    transition: all 0.2s ease;
    color: #fff;
    display: inline-block;
    min-width: 80px;
    text-align: center;
    font-family: sans-serif;
    border: 1px solid transparent;
    user-select: none;
}

.clickable-page:hover { 
    background: rgba(255, 255, 255, 0.2); 
    border-color: rgba(255, 255, 255, 0.3);
}

/* YAZIM MODU: Numpad açıldığında butonun dönüşeceği stil */
.clickable-page.yazim-modu {
    background: #ffffff !important;
    color: #43aa8b !important; /* Senin yeşil tonun */
    font-weight: bold;
    font-size: 20px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    border-color: #43aa8b;
    min-width: 60px;
}

/* --- 2. NUMPAD PANEL (KOYU TEMA) --- */
.numpad-modern {
    display: none; /* JS ile açılacak */
    position: absolute;
    bottom: 65px; /* Alt barın hemen üzerinde */
    left: 50%;
    transform: translateX(-50%);
    background: #2c2c2c; /* Koyu gri/siyah panel */
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    z-index: 2147483647;
    width: 170px; /* Kompakt genişlik */
    border: 1px solid #444;
}

/* --- 3. NUMPAD BUTON GRİD YAPISI --- */
.numpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

/* --- 4. NUMPAD BUTONLARI --- */
.n-btn {
    height: 42px;
    border: none;
    background: #3a3a3a; /* Buton arka planı */
    color: #ffffff;
    border-radius: 8px;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 0 #1a1a1a;
}

/* Buton Hover */
.n-btn:hover {
    background: #4a4a4a;
}

/* Buton Tıklama (Kaymayı önleyen scale efekti) */
.n-btn:active {
    transform: scale(0.9);
    background: #555;
    box-shadow: none;
}

/* --- 5. ÖZEL RENKLİ BUTONLAR --- */
/* GİT Butonu */
.n-btn.go { 
    background: #43aa8b; 
    color: white;
    box-shadow: 0 2px 0 #2d725d;
}
.n-btn.go:hover { background: #4ec09e; }

/* SİL (Geri) Butonu */
.n-btn.clear { 
    background: #f76c6c; 
    color: white;
    box-shadow: 0 2px 0 #b34d4d;
}
.n-btn.clear:hover { background: #ff8585; }

/* --- 6. HATA VE ANİMASYONLAR --- */
@keyframes sarsil {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Hata durumunda ana butonun sallanması */
.hata-vurgu {
    background: #f76c6c !important;
    color: #fff !important;
    animation: sarsil 0.3s ease-in-out;
    border: 1px solid red !important;
}

/* --- 7. MOBİL UYUM (OPSİYONEL) --- */
@media (max-width: 480px) {
    .numpad-modern {
        width: 150px;
        bottom: 55px;
    }
    .n-btn {
        height: 38px;
        font-size: 15px;
    }
}