:root {
    --safe-area-inset-bottom: 0px;
    color-scheme: light only;
}

* {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Allow touch gestures for iOS interface */
#ios-interface {
    touch-action: pan-y;
    -webkit-user-select: none;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    overscroll-behavior: none;
}

/* Terminal hacker ticker - desktop padding */
[data-title="apps.terminal"] .hacker-ticker-container {
    padding-top: 8px !important;
}

/* Touch cihazlarda scroll sırasında hover'ı engelle - sadece grid app-icon'ları */
@media (hover: none) {

    .grid .app-icon:hover>div>div:first-child,
    .dock-icon:hover>div>div:first-child,
    .group:hover .group-hover\:opacity-100 {
        opacity: 0 !important;
    }

    .grid .app-icon:hover .group-hover\:scale-110,
    .dock-icon:hover .group-hover\:scale-110 {
        transform: scale(1) !important;
    }
}

.iphone-container {
    width: 100%;
    height: 100%;
    max-width: 430px;
    /* iPhone 14 Pro Max width */
    max-height: 932px;
    /* iPhone 14 Pro Max height */
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.5);
}

.squircle {
    border-radius: 22.5%;
}

.app-screen {
    clip-path: inset(0% 0% 0% 0%);
    opacity: 1;
    transition: clip-path 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
    padding-top: 44px;
    /* status bar yüksekliği kadar boşluk */
}

.app-screen.hidden {
    clip-path: inset(50% 50% 50% 50%);
    opacity: 0;
    pointer-events: none;
}

.app-icon-bounce {
    animation: bounce 0.3s ease-out;
}

@keyframes bounce {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.8);
    }

    100% {
        transform: scale(1);
    }
}

.card-hover {
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.card-hover:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

.badge {
    font-size: 10px;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 9999px;
    color: #0b1021;
    background: linear-gradient(90deg, #e9d5ff, #dbeafe, #dcfce7);
    background-size: 200% 100%;
    animation: shine 3s linear infinite;
    white-space: nowrap;
}

.tag {
    font-size: 11px;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 9999px;
    background: #f3f4f6;
    color: #111827;
}

@keyframes shine {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.project-icon {
    transition: transform 0.25s ease;
}

.project-icon:hover {
    transform: scale(1.05) rotate(2deg);
}

.app-icon img {
    transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.2s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.app-icon {
    cursor: pointer;
}

@keyframes jiggle {
    0% {
        transform: rotate(-2deg) scale(1.02);
    }

    50% {
        transform: rotate(2deg) scale(1.02);
    }

    100% {
        transform: rotate(0deg) scale(1.02);
    }
}

.app-icon img.jiggle,
.jiggle {
    animation: jiggle 0.35s ease-in-out;
}

.dock-float {
    animation: floatY 4s ease-in-out infinite;
}

@keyframes floatY {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }

    100% {
        transform: translateY(0);
    }
}

/* iOS benzeri sayfa geçişleri */
.app-transition {
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
    will-change: transform, opacity;
}

.app-enter {
    transform: translateX(100%);
    opacity: 0;
}

.app-enter-active {
    transform: translateX(0);
    opacity: 1;
}

.app-exit {
    transform: translateX(0);
    opacity: 1;
}

.app-exit-active {
    transform: translateX(100%);
    opacity: 0;
}

/* iOS tarzı sheet/alert */
#extlink-sheet .modal-overlay {
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

#extlink-sheet.active {
    pointer-events: auto;
}

#extlink-sheet.active .modal-overlay {
    opacity: 1;
}

#extlink-sheet.active .sheet-panel {
    transform: translateY(0);
}

/* Modern Profile Widget - Clean iOS 17 Style */
.profile-widget {
    cursor: pointer;
}

/* Experience stars animation */
@keyframes starGlow {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* Notification Center styles moved to pages/notification_center/styles.css */

.notification-item {
    transform: translateY(10px);
    opacity: 0;
    animation: slideInNotification 0.3s ease-out forwards;
}

.notification-item:nth-child(1) {
    animation-delay: 0.1s;
}

.notification-item:nth-child(2) {
    animation-delay: 0.15s;
}

.notification-item:nth-child(3) {
    animation-delay: 0.2s;
}

.notification-item:nth-child(4) {
    animation-delay: 0.25s;
}

.notification-item:nth-child(5) {
    animation-delay: 0.3s;
}

@keyframes slideInNotification {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOutNotification {
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.notification-item:hover {
    transform: scale(1.02);
    transition: transform 0.2s ease;
}

.profile-widget .bg-yellow-400 {
    animation: starGlow 2s ease-in-out infinite;
}

.profile-widget .bg-yellow-400:nth-child(1) {
    animation-delay: 0s;
}

.profile-widget .bg-yellow-400:nth-child(2) {
    animation-delay: 0.2s;
}

.profile-widget .bg-yellow-400:nth-child(3) {
    animation-delay: 0.4s;
}

.profile-widget .bg-yellow-400:nth-child(4) {
    animation-delay: 0.6s;
}

.profile-widget .bg-yellow-400:nth-child(5) {
    animation-delay: 0.8s;
}

/* Floating background elements */
@keyframes floatSlow {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

@keyframes floatFast {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(-3deg);
    }
}

.profile-widget>div:last-child:nth-child(odd) {
    animation: floatSlow 6s ease-in-out infinite;
}

.profile-widget>div:last-child:nth-child(even) {
    animation: floatFast 4s ease-in-out infinite;
}

/* Dynamic Island (iPhone 17 Pro tarzı) */
#dynamic-island .island-base {
    width: 168px;
    height: 36px;
    background: #0a0a0a;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) inset, 0 1px 0 rgba(255, 255, 255, 0.06) inset;
    transition: width 0.28s cubic-bezier(0.32, 0.72, 0, 1), height 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#dynamic-island.expanded .island-base {
    width: 260px;
    height: 56px;
}

#dynamic-island .island-content {
    color: white;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

#dynamic-island.show-content .island-content {
    opacity: 1;
}

#dynamic-island .island-pulse {
    display: none !important;
}

/* Lock Screen Transitions - same pattern as notification center */
#lock-screen {
    transform: translateY(0);
    transition: transform 0.3s ease-out;
}

#lock-screen.lock-screen-hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

/* Safari Text Flickering Fix - overflow:hidden + border-radius + transform bug */
#app-projeler .h-\[400px\] .absolute {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ===== HOME SCREEN DOCK POSITIONING ===== */
/* İçerik az olsa bile dock her zaman altta kalır */
#home-screen>div {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

#home-screen>div>.space-y-6 {
    flex: 1;
}

#home-screen #dock {
    flex-shrink: 0;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Küçük ekranlar için (dar genişlik) */
@media (max-width: 380px) {

    /* Status bar - daha kompakt */
    #status-bar {
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 12px;
    }

    /* Dynamic Island - küçült */
    #dynamic-island .island-base {
        width: 120px;
        height: 28px;
        border-radius: 16px;
    }

    #dynamic-island.expanded .island-base {
        width: 200px;
        height: 44px;
    }

    /* Dock - hafif küçült */
    #dock {
        height: 5.5rem !important;
    }

    /* Dock ikonlarını hafif küçült, rounded-3xl koru */
    #dock a>div>div:last-child {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }

    #dock a svg {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }

    /* Dock container padding azalt */
    #dock>div {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* Dock icons arasındaki boşluğu azalt */
    #dock .space-x-4>*+* {
        margin-left: 0.75rem !important;
    }
}

/* Çok küçük ekranlar için (örn: iPhone SE) */
@media (max-width: 340px) {

    /* Status bar - daha da kompakt */
    #status-bar {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        font-size: 11px;
    }

    #status-bar .space-x-3>*+* {
        margin-left: 0.5rem !important;
    }

    #status-bar .space-x-1\.5>*+* {
        margin-left: 0.25rem !important;
    }

    /* Dynamic Island - daha da küçük */
    #dynamic-island .island-base {
        width: 100px;
        height: 24px;
        border-radius: 14px;
    }

    #dynamic-island.expanded .island-base {
        width: 160px;
        height: 38px;
    }

    /* Dock - daha kompakt */
    #dock {
        height: 5rem !important;
    }

    /* Dock ikonlarını biraz daha küçült */
    #dock a>div>div:last-child {
        width: 3rem !important;
        height: 3rem !important;
    }

    #dock a svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

    #dock>div {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #dock .space-x-4>*+* {
        margin-left: 0.5rem !important;
    }
}

/* ========================================================================
   MOBILE RESPONSIVE SYSTEM - Adım 1: Container (Emülatör Hissi)
   ======================================================================== */

/* 
   Mobil cihazlarda fake telefon çerçevesi görünsün:
   - Padding ile kenarlardan uzak
   - Safe-area ile gerçek cihazın UI'ından (notch, nav bar) uzak
   - Border-radius ve gölge ile emülatör hissi
*/

@media (max-width: 500px) {

    /* Body ve HTML - kesin scroll engeli */
    html,
    body {
        background-color: #1f2937 !important;
        overflow: hidden !important;
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        /* Swipe gesture'a izin ver ama scroll'u engelle */
        overscroll-behavior: none !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Fake telefon container - emülatör görünümü */
    #iphone.iphone-container {
        /* Boyut: Ekran - padding - safe areas */
        /* Height öncelikli - width aspect ratio'dan hesaplanacak */
        height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px) !important;

        /* Telefon aspect ratio: ~9.05:19.5 */
        aspect-ratio: 9.05 / 19.5 !important;

        /* Max width - çok geniş olmasın */
        max-width: calc(100vw - 32px) !important;
        max-height: none !important;
        width: auto !important;

        /* Konumlandırma: Ortala ve kenarlardan uzak tut */
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;

        /* Safe area'ları hesaba kat - yukarıda daha fazla boşluk (status bar çakışmaması için) */
        margin-top: calc((env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) / 2) !important;

        /* Görünüm: Çerçeve ve gölge */
        border-radius: 48px !important;
        border-width: 14px !important;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.1),
            0 25px 80px rgba(0, 0, 0, 0.6),
            0 0 40px rgba(0, 0, 0, 0.3) !important;
    }

    /* iOS interface - container içinde tam otur */
    #ios-interface {
        border-radius: 38px !important;
        overflow: hidden !important;
    }

    /* ========================================================================
       Adım 2: Home Screen - Scale Factor Based Responsive System
       iPhone 14 Pro Max (393x852) referans - diğer cihazlar orantılı küçülür
       calc(REFERENCE_PX * var(--mobile-scale)) formatı
       ======================================================================== */

    /* Home screen base - scroll yok, padding scaled */
    #home-screen {
        overflow: hidden !important;
        padding: calc(55px * var(--mobile-scale, 1)) calc(12px * var(--mobile-scale, 1)) calc(6px * var(--mobile-scale, 1)) calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Tailwind px-6 override */
    #home-screen.px-6 {
        padding-left: calc(12px * var(--mobile-scale, 1)) !important;
        padding-right: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Container flex layout */
    #home-screen>div {
        gap: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* space-y-6 → flex container yap ki gap çalışsın */
    #home-screen .space-y-6 {
        display: flex !important;
        flex-direction: column !important;
        gap: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Tailwind space-y margin'larını kaldır */
    #home-screen .space-y-6>*+* {
        margin-top: 0 !important;
    }

    /* ---- Profile Widget ---- */
    #home-screen .profile-widget {
        padding: calc(12px * var(--mobile-scale, 1)) !important;
        border-radius: calc(24px * var(--mobile-scale, 1)) !important;
    }

    /* Gradient overlay radius eşitle */
    #home-screen .profile-widget>div.absolute.inset-0 {
        border-radius: calc(24px * var(--mobile-scale, 1)) !important;
    }

    #home-screen .profile-widget img {
        width: calc(65px * var(--mobile-scale, 1)) !important;
        height: calc(65px * var(--mobile-scale, 1)) !important;
    }

    /* Online badge (yeşil nokta) */
    #home-screen .profile-widget .w-4.h-4 {
        width: calc(14px * var(--mobile-scale, 1)) !important;
        height: calc(14px * var(--mobile-scale, 1)) !important;
    }

    #home-screen .profile-widget h2 {
        font-size: calc(22px * var(--mobile-scale, 1)) !important;
        line-height: 1.2 !important;
        margin-bottom: calc(4px * var(--mobile-scale, 1)) !important;
    }

    #home-screen .profile-widget .gap-5 {
        gap: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Profile badges - mb-4'ü sıfırla */
    #home-screen .profile-widget .flex.flex-wrap.gap-2 {
        gap: calc(6px * var(--mobile-scale, 1)) !important;
        margin-bottom: 0 !important;
    }

    #home-screen .profile-widget .flex.flex-wrap.gap-2.mb-4 {
        margin-bottom: 0 !important;
    }

    /* Chip box - height küçült */
    #home-screen .profile-widget .flex.flex-wrap.gap-2>div {
        padding: calc(4px * var(--mobile-scale, 1)) calc(10px * var(--mobile-scale, 1)) !important;
        font-size: calc(13px * var(--mobile-scale, 1)) !important;
    }

    /* Role text (CTO section) - üst boşluk foto ile arasında */
    #home-screen .profile-widget .mt-3.space-y-0\.5,
    #home-screen .profile-widget .space-y-0\.5 {
        margin-top: calc(16px * var(--mobile-scale, 1)) !important;
        gap: 0 !important;
    }

    /* Rol text satırları - arası sıkı */
    #home-screen .profile-widget .space-y-0\.5>*+* {
        margin-top: calc(-1px * var(--mobile-scale, 1)) !important;
    }

    #home-screen .profile-widget .space-y-0\.5 p {
        font-size: calc(15px * var(--mobile-scale, 1)) !important;
        line-height: 1.3 !important;
    }

    #home-screen .profile-widget .space-y-0\.5 .text-xs {
        font-size: calc(13px * var(--mobile-scale, 1)) !important;
        line-height: 1.3 !important;
    }

    /* Experience section */
    #home-screen .profile-widget .mt-3.pt-3 {
        margin-top: calc(6px * var(--mobile-scale, 1)) !important;
        padding-top: calc(8px * var(--mobile-scale, 1)) !important;
    }

    #home-screen .profile-widget .mt-3.pt-3 span {
        font-size: calc(14px * var(--mobile-scale, 1)) !important;
    }

    /* ---- GitHub + Freelance Widgets ---- */
    #home-screen .flex.gap-4.mb-2 {
        gap: calc(16px * var(--mobile-scale, 1)) !important;
        margin-bottom: 0 !important;
    }

    #home-screen .flex.gap-4.mb-2>div {
        padding: calc(8px * var(--mobile-scale, 1)) calc(10px * var(--mobile-scale, 1)) !important;
        border-radius: calc(20px * var(--mobile-scale, 1)) !important;
    }

    #home-screen .flex.gap-4.mb-2 .w-10.h-10 {
        width: calc(40px * var(--mobile-scale, 1)) !important;
        height: calc(40px * var(--mobile-scale, 1)) !important;
    }

    #home-screen .flex.gap-4.mb-2 .w-6.h-6 {
        width: calc(24px * var(--mobile-scale, 1)) !important;
        height: calc(24px * var(--mobile-scale, 1)) !important;
    }

    #home-screen .flex.gap-4.mb-2 .text-xs {
        font-size: calc(14px * var(--mobile-scale, 1)) !important;
    }

    #home-screen .flex.gap-4.mb-2 .text-sm {
        font-size: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #home-screen .flex.gap-4.mb-2 .text-\[10px\] {
        font-size: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* GitHub bars */
    #home-screen .flex.gap-0\.5>div {
        width: calc(6px * var(--mobile-scale, 1)) !important;
    }

    /* ---- App Icons Grid ---- */
    #home-screen .grid.grid-cols-4 {
        gap: calc(16px * var(--mobile-scale, 1)) calc(8px * var(--mobile-scale, 1)) !important;
    }

    #home-screen .grid.grid-cols-4 .app-icon .w-16.h-16,
    #home-screen .grid.grid-cols-4 .app-icon>div>div:last-of-type {
        width: calc(70px * var(--mobile-scale, 1)) !important;
        height: calc(70px * var(--mobile-scale, 1)) !important;
        border-radius: calc(18px * var(--mobile-scale, 1)) !important;
    }

    #home-screen .grid.grid-cols-4 .app-icon .w-8.h-8,
    #home-screen .grid.grid-cols-4 .app-icon svg {
        width: calc(36px * var(--mobile-scale, 1)) !important;
        height: calc(36px * var(--mobile-scale, 1)) !important;
    }

    #home-screen .grid.grid-cols-4 .app-icon>span {
        font-size: calc(15px * var(--mobile-scale, 1)) !important;
        margin-top: calc(4px * var(--mobile-scale, 1)) !important;
    }

    /* Language icon text */
    #home-screen #lang-icon-text {
        font-size: calc(20px * var(--mobile-scale, 1)) !important;
    }

    /* ---- Dock ---- */
    #home-screen #dock {
        height: auto !important;
        padding-top: calc(10px * var(--mobile-scale, 1)) !important;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
        margin-left: calc(-8px * var(--mobile-scale, 1)) !important;
        margin-right: calc(-8px * var(--mobile-scale, 1)) !important;
        margin-bottom: calc(4px * var(--mobile-scale, 1)) !important;
    }

    #home-screen #dock>div {
        padding: calc(14px * var(--mobile-scale, 1)) calc(24px * var(--mobile-scale, 1)) !important;
        border-radius: calc(28px * var(--mobile-scale, 1)) !important;
        height: auto !important;
    }

    /* Dock gradient overlay radius eşitle */
    #home-screen #dock>div>div.absolute.inset-0 {
        border-radius: calc(28px * var(--mobile-scale, 1)) !important;
    }

    #home-screen #dock .dock-icon .w-16.h-16,
    #home-screen #dock a>div>div:last-of-type,
    #home-screen #dock .dock-icon>div>div:last-of-type {
        width: calc(64px * var(--mobile-scale, 1)) !important;
        height: calc(64px * var(--mobile-scale, 1)) !important;
        border-radius: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #home-screen #dock .w-8.h-8,
    #home-screen #dock svg {
        width: calc(36px * var(--mobile-scale, 1)) !important;
        height: calc(36px * var(--mobile-scale, 1)) !important;
    }

    #home-screen #dock .space-x-4 {
        gap: calc(18px * var(--mobile-scale, 1)) !important;
    }

    #home-screen #dock .space-x-4>*+* {
        margin-left: 0 !important;
    }

    /* ---- Status Bar ---- */
    #status-bar {
        height: calc(44px * var(--mobile-scale, 1)) !important;
        padding-left: calc(20px * var(--mobile-scale, 1)) !important;
        padding-right: calc(20px * var(--mobile-scale, 1)) !important;
        font-size: calc(14px * var(--mobile-scale, 1)) !important;
    }

    #status-bar svg {
        width: calc(16px * var(--mobile-scale, 1)) !important;
        height: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Dynamic Island */
    #dynamic-island .island-base {
        width: calc(120px * var(--mobile-scale, 1)) !important;
        height: calc(32px * var(--mobile-scale, 1)) !important;
        border-radius: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* ========================================================================
       LOCK SCREEN RESPONSIVE
       Reference: iPhone 14 Pro Max değerleri
       ======================================================================== */

    /* Lock screen container padding */
    #lock-screen {
        padding-top: calc(32px * var(--mobile-scale, 1)) !important;
        padding-bottom: calc(32px * var(--mobile-scale, 1)) !important;
    }

    /* Top section padding */
    #lock-screen>div:first-child {
        margin-top: calc(24px * var(--mobile-scale, 1)) !important;
        padding-left: calc(24px * var(--mobile-scale, 1)) !important;
        padding-right: calc(24px * var(--mobile-scale, 1)) !important;
    }

    /* Date */
    #lock-date {
        font-size: calc(20px * var(--mobile-scale, 1)) !important;
        margin-bottom: calc(4px * var(--mobile-scale, 1)) !important;
    }

    /* Time */
    #lock-time {
        font-size: calc(88px * var(--mobile-scale, 1)) !important;
        margin-bottom: calc(24px * var(--mobile-scale, 1)) !important;
    }

    /* Widget area */
    #lock-screen .flex.items-center.gap-3.w-full {
        gap: calc(12px * var(--mobile-scale, 1)) !important;
        max-width: calc(340px * var(--mobile-scale, 1)) !important;
        height: calc(72px * var(--mobile-scale, 1)) !important;
        margin-bottom: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Square widgets (Experience, iOS Dev) */
    #lock-screen .w-\[72px\].h-\[72px\] {
        width: calc(72px * var(--mobile-scale, 1)) !important;
        height: calc(72px * var(--mobile-scale, 1)) !important;
        border-radius: calc(18px * var(--mobile-scale, 1)) !important;
    }

    /* Widget inner ring SVG */
    #lock-screen .w-8.h-8 {
        width: calc(32px * var(--mobile-scale, 1)) !important;
        height: calc(32px * var(--mobile-scale, 1)) !important;
    }

    /* Widget inner text */
    #lock-screen .text-\[10px\] {
        font-size: calc(12px * var(--mobile-scale, 1)) !important;
    }

    #lock-screen .text-\[9px\] {
        font-size: calc(11px * var(--mobile-scale, 1)) !important;
    }

    /* Wide widget (Main Focus) */
    #lock-screen .flex-1.h-\[72px\] {
        height: calc(72px * var(--mobile-scale, 1)) !important;
        border-radius: calc(18px * var(--mobile-scale, 1)) !important;
        padding-left: calc(12px * var(--mobile-scale, 1)) !important;
        padding-right: calc(12px * var(--mobile-scale, 1)) !important;
        gap: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Wide widget icon */
    #lock-screen .w-8.h-8.rounded-lg {
        width: calc(32px * var(--mobile-scale, 1)) !important;
        height: calc(32px * var(--mobile-scale, 1)) !important;
        border-radius: calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* Widget icons (Apple, etc) */
    #lock-screen .w-7.h-7 {
        width: calc(28px * var(--mobile-scale, 1)) !important;
        height: calc(28px * var(--mobile-scale, 1)) !important;
    }

    /* ---- Notification List ---- */
    #lock-notification-list {
        padding-left: calc(16px * var(--mobile-scale, 1)) !important;
        padding-right: calc(16px * var(--mobile-scale, 1)) !important;
        gap: calc(10px * var(--mobile-scale, 1)) !important;
        margin-top: calc(24px * var(--mobile-scale, 1)) !important;
        margin-bottom: calc(64px * var(--mobile-scale, 1)) !important;
    }

    /* Notification card */
    #lock-notification-list>div {
        border-radius: calc(20px * var(--mobile-scale, 1)) !important;
        padding: calc(14px * var(--mobile-scale, 1)) !important;
        gap: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Notification icon */
    #lock-notification-list .w-9.h-9 {
        width: calc(36px * var(--mobile-scale, 1)) !important;
        height: calc(36px * var(--mobile-scale, 1)) !important;
        border-radius: calc(8px * var(--mobile-scale, 1)) !important;
    }

    #lock-notification-list .w-9.h-9 svg,
    #lock-notification-list .w-5.h-5 {
        width: calc(20px * var(--mobile-scale, 1)) !important;
        height: calc(20px * var(--mobile-scale, 1)) !important;
    }

    /* Notification text */
    #lock-notification-list .text-xs {
        font-size: calc(14px * var(--mobile-scale, 1)) !important;
        line-height: 1.3 !important;
    }

    #lock-notification-list .text-\[10px\] {
        font-size: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Notification header row margin */
    #lock-notification-list .mb-0\.5 {
        margin-bottom: calc(2px * var(--mobile-scale, 1)) !important;
    }

    /* Notification text paragraphs */
    #lock-notification-list p {
        margin-top: calc(1px * var(--mobile-scale, 1)) !important;
    }

    /* NEW badge */
    #lock-notification-list .px-2.py-0\.5 {
        padding: calc(2px * var(--mobile-scale, 1)) calc(8px * var(--mobile-scale, 1)) !important;
        font-size: calc(9px * var(--mobile-scale, 1)) !important;
        border-radius: calc(4px * var(--mobile-scale, 1)) !important;
    }

    /* ---- Bottom Controls ---- */
    #lock-screen>.absolute.bottom-8 {
        bottom: calc(32px * var(--mobile-scale, 1)) !important;
        padding-left: calc(40px * var(--mobile-scale, 1)) !important;
        padding-right: calc(40px * var(--mobile-scale, 1)) !important;
    }

    /* Bottom buttons (Flashlight, Camera) */
    #lock-screen .w-\[50px\].h-\[50px\] {
        width: calc(50px * var(--mobile-scale, 1)) !important;
        height: calc(50px * var(--mobile-scale, 1)) !important;
    }

    #lock-screen .w-\[50px\].h-\[50px\] svg {
        width: calc(24px * var(--mobile-scale, 1)) !important;
        height: calc(24px * var(--mobile-scale, 1)) !important;
    }

    /* Swipe indicator text */
    #lock-screen .text-xs.font-bold {
        font-size: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Swipe bar */
    #lock-screen .w-32.h-1 {
        width: calc(128px * var(--mobile-scale, 1)) !important;
        height: calc(4px * var(--mobile-scale, 1)) !important;
        border-radius: calc(2px * var(--mobile-scale, 1)) !important;
    }

    /* Swipe indicator gap */
    #lock-screen .flex.flex-col.items-center.gap-2 {
        gap: calc(8px * var(--mobile-scale, 1)) !important;
        margin-bottom: calc(4px * var(--mobile-scale, 1)) !important;
    }

    /* ========================================================================
       NOTIFICATION CENTER RESPONSIVE
       Lock screen ile aynı oranlar
       ======================================================================== */

    /* Header padding */
    #notification-center .pt-12 {
        padding-top: calc(48px * var(--mobile-scale, 1)) !important;
    }

    #notification-center .pb-3 {
        padding-bottom: calc(12px * var(--mobile-scale, 1)) !important;
    }

    #notification-center .px-6 {
        padding-left: calc(24px * var(--mobile-scale, 1)) !important;
        padding-right: calc(24px * var(--mobile-scale, 1)) !important;
    }

    #notification-center .mt-3 {
        margin-top: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Main title */
    #notification-center .text-3xl {
        font-size: calc(30px * var(--mobile-scale, 1)) !important;
    }

    /* Manage button */
    #nc-manage-btn {
        padding: calc(6px * var(--mobile-scale, 1)) calc(12px * var(--mobile-scale, 1)) !important;
        font-size: calc(14px * var(--mobile-scale, 1)) !important;
        border-radius: calc(9999px * var(--mobile-scale, 1)) !important;
    }

    /* Close button */
    #notification-center .w-8.h-8 {
        width: calc(32px * var(--mobile-scale, 1)) !important;
        height: calc(32px * var(--mobile-scale, 1)) !important;
    }

    #notification-center .w-8.h-8 svg {
        width: calc(16px * var(--mobile-scale, 1)) !important;
        height: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Header button gap */
    #notification-center .gap-2 {
        gap: calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* Filter segment */
    #notification-center .filter-segment {
        padding: calc(4px * var(--mobile-scale, 1)) !important;
        border-radius: calc(9999px * var(--mobile-scale, 1)) !important;
    }

    #notification-center .filter-segment button {
        padding: calc(6px * var(--mobile-scale, 1)) calc(12px * var(--mobile-scale, 1)) !important;
        font-size: calc(14px * var(--mobile-scale, 1)) !important;
    }

    /* Notification list */
    #nc-list {
        padding-left: calc(16px * var(--mobile-scale, 1)) !important;
        padding-right: calc(16px * var(--mobile-scale, 1)) !important;
        padding-bottom: calc(40px * var(--mobile-scale, 1)) !important;
    }

    #nc-list.space-y-4>*+* {
        margin-top: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Notification card */
    #nc-list .notification-item {
        border-radius: calc(20px * var(--mobile-scale, 1)) !important;
        padding: calc(14px * var(--mobile-scale, 1)) !important;
    }

    #nc-list .notification-item .gap-3 {
        gap: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Notification icon */
    #nc-list .w-9.h-9 {
        width: calc(36px * var(--mobile-scale, 1)) !important;
        height: calc(36px * var(--mobile-scale, 1)) !important;
        border-radius: calc(8px * var(--mobile-scale, 1)) !important;
    }

    #nc-list .w-9.h-9 svg,
    #nc-list .w-5.h-5 {
        width: calc(20px * var(--mobile-scale, 1)) !important;
        height: calc(20px * var(--mobile-scale, 1)) !important;
    }

    /* Notification text */
    #nc-list .text-xs {
        font-size: calc(14px * var(--mobile-scale, 1)) !important;
        line-height: 1.4 !important;
    }

    #nc-list .text-\[10px\] {
        font-size: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Header row margin */
    #nc-list .mb-0\.5 {
        margin-bottom: calc(2px * var(--mobile-scale, 1)) !important;
    }

    /* Action buttons */
    #nc-list .actions button {
        padding: calc(4px * var(--mobile-scale, 1)) calc(12px * var(--mobile-scale, 1)) !important;
        font-size: calc(12px * var(--mobile-scale, 1)) !important;
        border-radius: calc(9999px * var(--mobile-scale, 1)) !important;
        gap: calc(4px * var(--mobile-scale, 1)) !important;
    }

    #nc-list .actions button svg {
        width: calc(10px * var(--mobile-scale, 1)) !important;
        height: calc(10px * var(--mobile-scale, 1)) !important;
    }

    #nc-list .mt-2 {
        margin-top: calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* Bottom drag handle */
    #nc-drag-handle {
        height: calc(64px * var(--mobile-scale, 1)) !important;
    }

    #nc-drag-handle>div {
        width: calc(56px * var(--mobile-scale, 1)) !important;
        height: calc(6px * var(--mobile-scale, 1)) !important;
        border-radius: calc(9999px * var(--mobile-scale, 1)) !important;
    }

    /* ========================================================================
       EXTLINK SHEET RESPONSIVE
       ======================================================================== */

    /* Sheet panel padding */
    #extlink-sheet .sheet-panel {
        padding: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Modal container - padding artırıldı */
    #extlink-sheet .sheet-panel>div {
        border-radius: calc(20px * var(--mobile-scale, 1)) !important;
        padding: calc(20px * var(--mobile-scale, 1)) !important;
    }

    /* Title - büyütüldü */
    #extlink-sheet .text-base {
        font-size: calc(18px * var(--mobile-scale, 1)) !important;
    }

    /* Description - büyütüldü ve boşluk artırıldı */
    #extlink-sheet .text-sm {
        font-size: calc(15px * var(--mobile-scale, 1)) !important;
        margin-top: calc(8px * var(--mobile-scale, 1)) !important;
        line-height: 1.4 !important;
    }

    /* Button grid - boşluk artırıldı */
    #extlink-sheet .mt-3 {
        margin-top: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #extlink-sheet .gap-2 {
        gap: calc(10px * var(--mobile-scale, 1)) !important;
    }

    /* Buttons - büyütüldü */
    #extlink-sheet button {
        padding: calc(12px * var(--mobile-scale, 1)) calc(20px * var(--mobile-scale, 1)) !important;
        border-radius: calc(14px * var(--mobile-scale, 1)) !important;
        font-size: calc(17px * var(--mobile-scale, 1)) !important;
        font-weight: 500 !important;
    }

    /* ========================================================================
       SETTINGS PAGE RESPONSIVE
       ======================================================================== */

    /* Main container padding */
    #app-ayarlar main>div {
        padding-left: calc(16px * var(--mobile-scale, 1)) !important;
        padding-right: calc(16px * var(--mobile-scale, 1)) !important;
        padding-bottom: calc(128px * var(--mobile-scale, 1)) !important;
    }

    /* Section spacing */
    #app-ayarlar .space-y-6>*+* {
        margin-top: calc(24px * var(--mobile-scale, 1)) !important;
    }

    /* Section headers */
    #app-ayarlar h3.text-xs {
        font-size: calc(12px * var(--mobile-scale, 1)) !important;
        padding-left: calc(16px * var(--mobile-scale, 1)) !important;
        padding-right: calc(16px * var(--mobile-scale, 1)) !important;
        margin-bottom: calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* Card radius */
    #app-ayarlar .rounded-xl {
        border-radius: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Profile card */
    #profile-card {
        padding: calc(16px * var(--mobile-scale, 1)) !important;
        gap: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Profile image */
    #profile-card img {
        width: calc(64px * var(--mobile-scale, 1)) !important;
        height: calc(64px * var(--mobile-scale, 1)) !important;
    }

    /* Profile name */
    #profile-card .text-lg {
        font-size: calc(18px * var(--mobile-scale, 1)) !important;
    }

    /* Row padding */
    #app-ayarlar .p-3\.5 {
        padding: calc(14px * var(--mobile-scale, 1)) !important;
    }

    /* Row icons */
    #app-ayarlar .w-7.h-7 {
        width: calc(28px * var(--mobile-scale, 1)) !important;
        height: calc(28px * var(--mobile-scale, 1)) !important;
        border-radius: calc(6px * var(--mobile-scale, 1)) !important;
    }

    #app-ayarlar .w-7.h-7 svg,
    #app-ayarlar .w-4.h-4 {
        width: calc(16px * var(--mobile-scale, 1)) !important;
        height: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Row text */
    #app-ayarlar .font-medium {
        font-size: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #app-ayarlar .text-gray-500,
    #app-ayarlar .text-gray-400 {
        font-size: calc(14px * var(--mobile-scale, 1)) !important;
    }

    #app-ayarlar .text-sm {
        font-size: calc(14px * var(--mobile-scale, 1)) !important;
    }

    /* Row gap */
    #app-ayarlar .gap-3 {
        gap: calc(12px * var(--mobile-scale, 1)) !important;
    }

    #app-ayarlar .gap-2 {
        gap: calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* Small text */
    #app-ayarlar .text-\[10px\],
    #app-ayarlar .text-\[11px\] {
        font-size: calc(11px * var(--mobile-scale, 1)) !important;
    }

    /* Toggle switch */
    #app-ayarlar .w-11.h-6 {
        width: calc(44px * var(--mobile-scale, 1)) !important;
        height: calc(24px * var(--mobile-scale, 1)) !important;
    }

    /* Dot indicators */
    #app-ayarlar .w-2\.5.h-2\.5 {
        width: calc(10px * var(--mobile-scale, 1)) !important;
        height: calc(10px * var(--mobile-scale, 1)) !important;
    }

    #app-ayarlar .w-1\.5.h-1\.5 {
        width: calc(6px * var(--mobile-scale, 1)) !important;
        height: calc(6px * var(--mobile-scale, 1)) !important;
    }

    /* Footer */
    #app-ayarlar .text-lg {
        font-size: calc(18px * var(--mobile-scale, 1)) !important;
    }

    #app-ayarlar .pt-6 {
        padding-top: calc(24px * var(--mobile-scale, 1)) !important;
    }

    /* ========================================================================
       NAVIGATION HEADER & BACK BUTTON (Global)
       ======================================================================== */

    /* Navigation header container */
    .app-screen>div:first-child[class*="absolute"][class*="top-0"] {
        padding-top: calc(44px * var(--mobile-scale, 1)) !important;
        padding-left: calc(16px * var(--mobile-scale, 1)) !important;
        padding-right: calc(16px * var(--mobile-scale, 1)) !important;
        min-height: calc(78px * var(--mobile-scale, 1)) !important;
    }

    /* Back button text */
    .nav-back {
        font-size: calc(18px * var(--mobile-scale, 1)) !important;
        gap: calc(2px * var(--mobile-scale, 1)) !important;
    }

    /* Back button arrow */
    .nav-back svg {
        width: calc(24px * var(--mobile-scale, 1)) !important;
        height: calc(24px * var(--mobile-scale, 1)) !important;
        margin-right: calc(2px * var(--mobile-scale, 1)) !important;
    }

    /* Large title */
    .ios-large-title {
        font-size: calc(30px * var(--mobile-scale, 1)) !important;
        padding-left: calc(16px * var(--mobile-scale, 1)) !important;
        padding-right: calc(16px * var(--mobile-scale, 1)) !important;
        /* Küçük ekranda inline padding'i dengelemek için negatif margin */
        margin-top: calc(-18px * (1 - var(--mobile-scale, 1))) !important;
        margin-bottom: calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* Small title (collapsed state) */
    .ios-small-title {
        font-size: calc(17px * var(--mobile-scale, 1)) !important;
    }

    /* Navigation header cLB text */
    .app-screen .text-sm {
        font-size: calc(14px * var(--mobile-scale, 1)) !important;
    }

    /* Navigation header back text */
    .app-screen .text-lg {
        font-size: calc(18px * var(--mobile-scale, 1)) !important;
    }

    /* Navigation header SVG icon */
    .app-screen .w-6.h-6 {
        width: calc(24px * var(--mobile-scale, 1)) !important;
        height: calc(24px * var(--mobile-scale, 1)) !important;
    }

    /* Scroll container padding-top for header - inline style override */
    .app-screen main,
    #settings-main,
    .app-screen main[style] {
        padding-top: calc(78px * var(--mobile-scale, 1)) !important;
    }

    /* ========================================================================
       SETTINGS PAGE SPECIFIC FIXES
       ======================================================================== */

    /* Language icon - scale factor uygula */
    #settings-lang-icon {
        width: calc(28px * var(--mobile-scale, 1)) !important;
        height: calc(28px * var(--mobile-scale, 1)) !important;
        font-size: calc(11px * var(--mobile-scale, 1)) !important;
        border-radius: calc(6px * var(--mobile-scale, 1)) !important;
    }

    /* Toggle switch - düzeltilmiş değerler */
    #app-ayarlar .w-11.h-6,
    #app-ayarlar label .w-11 {
        width: calc(44px * var(--mobile-scale, 1)) !important;
        height: calc(24px * var(--mobile-scale, 1)) !important;
        border-radius: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Toggle switch knob */
    #app-ayarlar label div[class*="after:"] {
        border-radius: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Toggle knob size via after: pseudo-element - use separate rule */
    #app-ayarlar .peer-checked\:after\:translate-x-full::after,
    #app-ayarlar div[class*="after:h-5"]::after {
        width: calc(20px * var(--mobile-scale, 1)) !important;
        height: calc(20px * var(--mobile-scale, 1)) !important;
        top: calc(2px * var(--mobile-scale, 1)) !important;
        left: calc(2px * var(--mobile-scale, 1)) !important;
    }

    /* ========================================================================
       REFERENCES PAGE RESPONSIVE
       ======================================================================== */

    /* Search bar container */
    #app-referanslar .px-4.mb-4 {
        padding-left: calc(16px * var(--mobile-scale, 1)) !important;
        padding-right: calc(16px * var(--mobile-scale, 1)) !important;
        margin-bottom: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Search input */
    #app-referanslar input[type="text"] {
        padding: calc(8px * var(--mobile-scale, 1)) calc(12px * var(--mobile-scale, 1)) calc(8px * var(--mobile-scale, 1)) calc(36px * var(--mobile-scale, 1)) !important;
        border-radius: calc(12px * var(--mobile-scale, 1)) !important;
        font-size: calc(14px * var(--mobile-scale, 1)) !important;
    }

    /* Search icons */
    #app-referanslar input+div svg,
    #app-referanslar .pl-3 svg {
        width: calc(16px * var(--mobile-scale, 1)) !important;
        height: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Search icon left position */
    #app-referanslar .pl-3 {
        padding-left: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Search icon right position */
    #app-referanslar .pr-3 {
        padding-right: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Contact row container */
    #app-referanslar .pl-4.pr-10.py-3 {
        padding-left: calc(16px * var(--mobile-scale, 1)) !important;
        padding-right: calc(40px * var(--mobile-scale, 1)) !important;
        padding-top: calc(12px * var(--mobile-scale, 1)) !important;
        padding-bottom: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Row gap */
    #app-referanslar .gap-3 {
        gap: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* My Card - Profile image */
    #app-referanslar .w-14.h-14 {
        width: calc(56px * var(--mobile-scale, 1)) !important;
        height: calc(56px * var(--mobile-scale, 1)) !important;
    }

    /* Contact avatar */
    #app-referanslar .w-10.h-10 {
        width: calc(40px * var(--mobile-scale, 1)) !important;
        height: calc(40px * var(--mobile-scale, 1)) !important;
        font-size: calc(14px * var(--mobile-scale, 1)) !important;
    }

    /* Name text - My Card */
    #app-referanslar .text-lg {
        font-size: calc(20px * var(--mobile-scale, 1)) !important;
    }

    /* Name text - Contacts */
    #app-referanslar .text-base {
        font-size: calc(17px * var(--mobile-scale, 1)) !important;
        line-height: calc(22px * var(--mobile-scale, 1)) !important;
    }

    /* Subtitle/title text */
    #app-referanslar .text-xs {
        font-size: calc(13px * var(--mobile-scale, 1)) !important;
        line-height: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* LinkedIn button */
    #app-referanslar .w-8.h-8 {
        width: calc(32px * var(--mobile-scale, 1)) !important;
        height: calc(32px * var(--mobile-scale, 1)) !important;
        border-radius: calc(8px * var(--mobile-scale, 1)) !important;
    }

    #app-referanslar .w-8.h-8 svg,
    #app-referanslar .w-5.h-5 {
        width: calc(20px * var(--mobile-scale, 1)) !important;
        height: calc(20px * var(--mobile-scale, 1)) !important;
    }

    /* Section headers (B, E, H) */
    #app-referanslar .px-4.py-1 {
        padding-left: calc(16px * var(--mobile-scale, 1)) !important;
        padding-right: calc(16px * var(--mobile-scale, 1)) !important;
        padding-top: calc(4px * var(--mobile-scale, 1)) !important;
        padding-bottom: calc(4px * var(--mobile-scale, 1)) !important;
    }

    /* Details panel */
    #app-referanslar .p-4.border-b {
        padding: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #app-referanslar .p-3.border-b {
        padding: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Details card radius */
    #app-referanslar .rounded-xl.overflow-hidden {
        border-radius: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Details label */
    #app-referanslar .text-\[10px\] {
        font-size: calc(10px * var(--mobile-scale, 1)) !important;
    }

    /* Details text */
    #app-referanslar .text-sm {
        font-size: calc(14px * var(--mobile-scale, 1)) !important;
    }

    /* Right side index */
    #app-referanslar .fixed.right-1 {
        right: calc(4px * var(--mobile-scale, 1)) !important;
        top: calc(144px * var(--mobile-scale, 1)) !important;
        bottom: calc(80px * var(--mobile-scale, 1)) !important;
        font-size: calc(10px * var(--mobile-scale, 1)) !important;
        gap: calc(4px * var(--mobile-scale, 1)) !important;
    }

    /* ml-2 for LinkedIn button */
    #app-referanslar .ml-2 {
        margin-left: calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* ========================================================================
       ABOUT PAGE RESPONSIVE
       ======================================================================== */

    /* Main container */
    #app-about .px-5 {
        padding-left: calc(20px * var(--mobile-scale, 1)) !important;
        padding-right: calc(20px * var(--mobile-scale, 1)) !important;
    }

    #app-about .space-y-8>*+* {
        margin-top: calc(32px * var(--mobile-scale, 1)) !important;
    }

    #app-about .space-y-4>*+* {
        margin-top: calc(12px * var(--mobile-scale, 1)) !important;
    }

    #app-about .space-y-3>*+* {
        margin-top: calc(4px * var(--mobile-scale, 1)) !important;
    }

    /* Card padding and radius */
    #app-about .rounded-xl {
        border-radius: calc(12px * var(--mobile-scale, 1)) !important;
    }

    #app-about .p-5 {
        padding: calc(20px * var(--mobile-scale, 1)) !important;
    }

    #app-about .p-4 {
        padding: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #app-about .p-3 {
        padding: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Profile image */
    #app-about .w-24.h-24 {
        width: calc(96px * var(--mobile-scale, 1)) !important;
        height: calc(96px * var(--mobile-scale, 1)) !important;
    }

    /* Name */
    #app-about .text-2xl {
        font-size: calc(24px * var(--mobile-scale, 1)) !important;
        line-height: calc(32px * var(--mobile-scale, 1)) !important;
    }

    /* Role badges */
    #app-about .px-3.py-1 {
        padding: calc(4px * var(--mobile-scale, 1)) calc(12px * var(--mobile-scale, 1)) !important;
    }

    #app-about .rounded-full {
        border-radius: calc(9999px * var(--mobile-scale, 1)) !important;
    }

    #app-about .gap-2 {
        gap: calc(8px * var(--mobile-scale, 1)) !important;
    }

    #app-about .mt-2 {
        margin-top: calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* Section titles */
    #app-about h3.text-lg {
        font-size: calc(18px * var(--mobile-scale, 1)) !important;
        line-height: calc(24px * var(--mobile-scale, 1)) !important;
    }

    #app-about .text-xl {
        font-size: calc(20px * var(--mobile-scale, 1)) !important;
    }

    /* Text sizes */
    #app-about .text-xs {
        font-size: calc(13px * var(--mobile-scale, 1)) !important;
        line-height: calc(18px * var(--mobile-scale, 1)) !important;
    }

    #app-about .text-sm {
        font-size: calc(15px * var(--mobile-scale, 1)) !important;
        line-height: calc(20px * var(--mobile-scale, 1)) !important;
    }

    /* Small badges - yıl ve GPA badges */
    #app-about .text-\[10px\] {
        font-size: calc(11px * var(--mobile-scale, 1)) !important;
        line-height: calc(14px * var(--mobile-scale, 1)) !important;
    }

    #app-about .px-2.py-0\.5 {
        padding: calc(2px * var(--mobile-scale, 1)) calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* Keep learning badge - py-1 */
    #app-about .px-2.py-1 {
        padding: calc(4px * var(--mobile-scale, 1)) calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* Education timeline */
    #app-about .pl-8 {
        padding-left: calc(32px * var(--mobile-scale, 1)) !important;
    }

    #app-about .mb-6 {
        margin-bottom: calc(24px * var(--mobile-scale, 1)) !important;
    }

    #app-about .left-6 {
        left: calc(24px * var(--mobile-scale, 1)) !important;
    }

    #app-about .left-4 {
        left: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Timeline dots position */
    #app-about .top-1\.5 {
        top: calc(6px * var(--mobile-scale, 1)) !important;
    }

    #app-about .-ml-2 {
        margin-left: calc(-8px * var(--mobile-scale, 1)) !important;
    }

    #app-about .w-4.h-4 {
        width: calc(16px * var(--mobile-scale, 1)) !important;
        height: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Copy icon */
    #app-about .w-5.h-5 {
        width: calc(20px * var(--mobile-scale, 1)) !important;
        height: calc(20px * var(--mobile-scale, 1)) !important;
    }

    /* Interests grid */
    #app-about .gap-3 {
        gap: calc(12px * var(--mobile-scale, 1)) !important;
    }

    #app-about .text-2xl {
        font-size: calc(24px * var(--mobile-scale, 1)) !important;
    }

    #app-about .mb-2 {
        margin-bottom: calc(8px * var(--mobile-scale, 1)) !important;
    }

    #app-about .mt-1 {
        margin-top: calc(4px * var(--mobile-scale, 1)) !important;
    }

    /* Intro text padding */
    #app-about .px-2 {
        padding-left: calc(8px * var(--mobile-scale, 1)) !important;
        padding-right: calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* Section title margin */
    #app-about .px-1 {
        padding-left: calc(4px * var(--mobile-scale, 1)) !important;
        padding-right: calc(4px * var(--mobile-scale, 1)) !important;
    }

    /* Bottom padding */
    #app-about .pb-24 {
        padding-bottom: calc(96px * var(--mobile-scale, 1)) !important;
    }

    /* ========================================================================
       SKILLS PAGE RESPONSIVE
       ======================================================================== */

    /* Main container padding */
    #app-skills .pb-10 {
        padding-bottom: calc(40px * var(--mobile-scale, 1)) !important;
    }

    /* Container padding */
    #app-skills .px-4 {
        padding-left: calc(16px * var(--mobile-scale, 1)) !important;
        padding-right: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .px-5 {
        padding-left: calc(20px * var(--mobile-scale, 1)) !important;
        padding-right: calc(20px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .mx-4 {
        margin-left: calc(16px * var(--mobile-scale, 1)) !important;
        margin-right: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Card padding and radius */
    #app-skills .rounded-\[20px\] {
        border-radius: calc(20px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .rounded-\[18px\] {
        border-radius: calc(18px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .rounded-\[8px\] {
        border-radius: calc(8px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .rounded-xl {
        border-radius: calc(12px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .rounded-lg {
        border-radius: calc(8px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .rounded-md {
        border-radius: calc(6px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .p-5 {
        padding: calc(20px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .p-4 {
        padding: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .p-3\.5 {
        padding: calc(14px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .p-3 {
        padding: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Professional summary icon */
    #app-skills .w-10.h-10 {
        width: calc(40px * var(--mobile-scale, 1)) !important;
        height: calc(40px * var(--mobile-scale, 1)) !important;
    }

    /* Language icon */
    #app-skills .w-8.h-8 {
        width: calc(32px * var(--mobile-scale, 1)) !important;
        height: calc(32px * var(--mobile-scale, 1)) !important;
    }

    /* SVG icons */
    #app-skills .w-5.h-5 {
        width: calc(20px * var(--mobile-scale, 1)) !important;
        height: calc(20px * var(--mobile-scale, 1)) !important;
    }

    /* Proficiency dots */
    #app-skills .w-1\.5.h-1\.5 {
        width: calc(6px * var(--mobile-scale, 1)) !important;
        height: calc(6px * var(--mobile-scale, 1)) !important;
    }

    /* Gaps */
    #app-skills .gap-4 {
        gap: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .gap-3 {
        gap: calc(12px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .gap-2 {
        gap: calc(8px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .gap-0\.5 {
        gap: calc(2px * var(--mobile-scale, 1)) !important;
    }

    /* Margins */
    #app-skills .mb-4 {
        margin-bottom: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .mb-3 {
        margin-bottom: calc(12px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .mb-2 {
        margin-bottom: calc(8px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .mt-6 {
        margin-top: calc(24px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .mt-2 {
        margin-top: calc(8px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .mt-1 {
        margin-top: calc(4px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .pb-2 {
        padding-bottom: calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* Font sizes - 1px artırılmış */
    #app-skills .text-\[18px\] {
        font-size: calc(19px * var(--mobile-scale, 1)) !important;
        line-height: calc(25px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .text-\[16px\] {
        font-size: calc(17px * var(--mobile-scale, 1)) !important;
        line-height: calc(23px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .text-\[14px\] {
        font-size: calc(15px * var(--mobile-scale, 1)) !important;
        line-height: calc(21px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .text-\[13px\] {
        font-size: calc(14px * var(--mobile-scale, 1)) !important;
        line-height: calc(19px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .text-\[12px\] {
        font-size: calc(13px * var(--mobile-scale, 1)) !important;
        line-height: calc(17px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .text-\[11px\] {
        font-size: calc(12px * var(--mobile-scale, 1)) !important;
        line-height: calc(15px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .text-sm {
        font-size: calc(15px * var(--mobile-scale, 1)) !important;
    }

    /* Tag badges padding */
    #app-skills .px-3.py-1\.5 {
        padding: calc(6px * var(--mobile-scale, 1)) calc(12px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .px-2\.5.py-1 {
        padding: calc(4px * var(--mobile-scale, 1)) calc(10px * var(--mobile-scale, 1)) !important;
    }

    #app-skills .px-2.py-0\.5 {
        padding: calc(2px * var(--mobile-scale, 1)) calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* Experience Summary chips - font size geri alındı */
    #app-skills .px-3.py-1\.5.text-\[13px\] {
        font-size: calc(13px * var(--mobile-scale, 1)) !important;
        line-height: calc(18px * var(--mobile-scale, 1)) !important;
    }

    /* ========================================================================
       RESUME PAGE RESPONSIVE
       ======================================================================== */

    /* Main container */
    #app-cv .pb-12 {
        padding-bottom: calc(48px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .px-4 {
        padding-left: calc(16px * var(--mobile-scale, 1)) !important;
        padding-right: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .px-2 {
        padding-left: calc(8px * var(--mobile-scale, 1)) !important;
        padding-right: calc(8px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .space-y-6>*+* {
        margin-top: calc(24px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .space-y-3>*+* {
        margin-top: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Profile header */
    #app-cv .rounded-xl {
        border-radius: calc(12px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .p-5 {
        padding: calc(20px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .w-24.h-24 {
        width: calc(96px * var(--mobile-scale, 1)) !important;
        height: calc(96px * var(--mobile-scale, 1)) !important;
    }

    /* Card radius */
    #app-cv .rounded-\[12px\] {
        border-radius: calc(12px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .rounded-\[10px\] {
        border-radius: calc(10px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .rounded-full {
        border-radius: 9999px !important;
    }

    /* Company/School icons */
    #app-cv .w-10.h-10 {
        width: calc(40px * var(--mobile-scale, 1)) !important;
        height: calc(40px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .w-8.h-8 {
        width: calc(32px * var(--mobile-scale, 1)) !important;
        height: calc(32px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .w-5.h-5 {
        width: calc(20px * var(--mobile-scale, 1)) !important;
        height: calc(20px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .w-4.h-4 {
        width: calc(16px * var(--mobile-scale, 1)) !important;
        height: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .w-1.h-1 {
        width: calc(4px * var(--mobile-scale, 1)) !important;
        height: calc(4px * var(--mobile-scale, 1)) !important;
    }

    /* Padding */
    #app-cv .pl-4 {
        padding-left: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .pr-4 {
        padding-right: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .py-3\.5 {
        padding-top: calc(14px * var(--mobile-scale, 1)) !important;
        padding-bottom: calc(14px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .pb-6 {
        padding-bottom: calc(24px * var(--mobile-scale, 1)) !important;
    }

    /* Gaps */
    #app-cv .gap-3 {
        gap: calc(12px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .gap-2 {
        gap: calc(8px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .gap-1\.5 {
        gap: calc(6px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .gap-1 {
        gap: calc(4px * var(--mobile-scale, 1)) !important;
    }

    /* Margins */
    #app-cv .ml-3\.5 {
        margin-left: calc(14px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .mb-2 {
        margin-bottom: calc(8px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .mb-1\.5 {
        margin-bottom: calc(6px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .mb-0\.5 {
        margin-bottom: calc(2px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .mt-2 {
        margin-top: calc(8px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .mt-4 {
        margin-top: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .mt-0\.5 {
        margin-top: calc(2px * var(--mobile-scale, 1)) !important;
    }

    /* Font sizes - 1px artırılmış */
    #app-cv .text-2xl {
        font-size: calc(25px * var(--mobile-scale, 1)) !important;
        line-height: calc(32px * var(--mobile-scale, 1)) !important;
    }

    /* Company icon text - nav-back hariç */
    #app-cv .text-lg:not(.nav-back) {
        font-size: calc(19px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .text-\[16px\] {
        font-size: calc(17px * var(--mobile-scale, 1)) !important;
        line-height: calc(23px * var(--mobile-scale, 1)) !important;
    }

    /* Education school name */
    #app-cv .text-\[15px\] {
        font-size: calc(15px * var(--mobile-scale, 1)) !important;
        line-height: calc(21px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .text-\[13px\] {
        font-size: calc(14px * var(--mobile-scale, 1)) !important;
        line-height: calc(19px * var(--mobile-scale, 1)) !important;
    }

    /* Education date nowrap */
    #app-cv .text-\[13px\].text-gray-400 {
        white-space: nowrap !important;
    }

    #app-cv .text-\[12px\] {
        font-size: calc(13px * var(--mobile-scale, 1)) !important;
        line-height: calc(17px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .text-\[11px\] {
        font-size: calc(12px * var(--mobile-scale, 1)) !important;
        line-height: calc(15px * var(--mobile-scale, 1)) !important;
    }

    /* Project chips - font +1px artırılmış */
    #app-cv .text-\[10px\] {
        font-size: calc(12px * var(--mobile-scale, 1)) !important;
        line-height: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .text-\[9px\] {
        font-size: calc(10px * var(--mobile-scale, 1)) !important;
        line-height: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Profile header role chips - font +1px */
    #app-cv .text-xs {
        font-size: calc(14px * var(--mobile-scale, 1)) !important;
        line-height: calc(18px * var(--mobile-scale, 1)) !important;
    }

    /* Profile header chips padding - +1px top/bottom */
    #app-cv .px-3.py-1 {
        padding: calc(5px * var(--mobile-scale, 1)) calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Project chips padding - +1px top/bottom */
    #app-cv .px-2.py-0\.5 {
        padding: calc(3px * var(--mobile-scale, 1)) calc(8px * var(--mobile-scale, 1)) !important;
    }

    #app-cv .px-1\.5.py-0\.5 {
        padding: calc(2px * var(--mobile-scale, 1)) calc(6px * var(--mobile-scale, 1)) !important;
    }

    /* ========================================================================
       PROJECTS PAGE RESPONSIVE - PROJECT LISTS
       ======================================================================== */

    /* Main container */
    #app-projeler .pb-24 {
        padding-bottom: calc(96px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .px-5 {
        padding-left: calc(20px * var(--mobile-scale, 1)) !important;
        padding-right: calc(20px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .mb-8 {
        margin-bottom: calc(32px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .mb-3 {
        margin-bottom: calc(12px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .mb-4 {
        margin-bottom: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .mb-2 {
        margin-bottom: calc(8px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .mb-0\.5 {
        margin-bottom: calc(2px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .mt-1 {
        margin-top: calc(4px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .mt-0\.5 {
        margin-top: calc(2px * var(--mobile-scale, 1)) !important;
    }

    /* Hero card */
    #app-projeler .h-\[400px\] {
        height: calc(400px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .rounded-\[32px\] {
        border-radius: calc(32px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .top-6 {
        top: calc(24px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .left-6 {
        left: calc(24px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .right-6 {
        right: calc(24px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .bottom-6 {
        bottom: calc(24px * var(--mobile-scale, 1)) !important;
    }

    /* Featured grid cards */
    #app-projeler .h-\[160px\] {
        height: calc(160px * var(--mobile-scale, 1)) !important;
    }

    /* Featured grid card titles - override inline clamp */
    #app-projeler .h-\[160px\] h4.font-bold {
        font-size: calc(15px * var(--mobile-scale, 1)) !important;
        line-height: calc(18px * var(--mobile-scale, 1)) !important;
    }

    /* Featured grid card padding */
    #app-projeler .h-\[160px\].p-3 {
        padding: calc(12px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .rounded-\[22px\] {
        border-radius: calc(22px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .rounded-\[20px\] {
        border-radius: calc(20px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .rounded-\[12px\] {
        border-radius: calc(12px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .rounded-xl {
        border-radius: calc(12px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .rounded-2xl {
        border-radius: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .rounded-lg {
        border-radius: calc(8px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .rounded-md {
        border-radius: calc(6px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .rounded-full {
        border-radius: 9999px !important;
    }

    /* Horizontal scroll cards */
    #app-projeler .w-\[240px\] {
        width: calc(240px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .h-\[120px\] {
        height: calc(120px * var(--mobile-scale, 1)) !important;
    }

    /* Horizontal scroll card titles - override inline clamp */
    #app-projeler .h-\[120px\] h4.font-bold {
        font-size: calc(15px * var(--mobile-scale, 1)) !important;
        line-height: calc(18px * var(--mobile-scale, 1)) !important;
    }

    /* Horizontal scroll card padding */
    #app-projeler .h-\[120px\].p-3 {
        padding: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Grid gap */
    #app-projeler .gap-3 {
        gap: calc(12px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .gap-4 {
        gap: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .gap-2 {
        gap: calc(8px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .gap-1\.5 {
        gap: calc(6px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .gap-1 {
        gap: calc(4px * var(--mobile-scale, 1)) !important;
    }

    /* Padding */
    #app-projeler .p-3 {
        padding: calc(12px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .p-2 {
        padding: calc(8px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .pb-4 {
        padding-bottom: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* List item icons */
    #app-projeler .w-14.h-14 {
        width: calc(56px * var(--mobile-scale, 1)) !important;
        height: calc(56px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .w-12.h-12 {
        width: calc(48px * var(--mobile-scale, 1)) !important;
        height: calc(48px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .w-6.h-6 {
        width: calc(24px * var(--mobile-scale, 1)) !important;
        height: calc(24px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .w-4.h-4 {
        width: calc(16px * var(--mobile-scale, 1)) !important;
        height: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Font sizes - 1px artırılmış */
    #app-projeler .text-4xl {
        font-size: calc(37px * var(--mobile-scale, 1)) !important;
        line-height: calc(44px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .text-2xl {
        font-size: calc(25px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .text-xl {
        font-size: calc(21px * var(--mobile-scale, 1)) !important;
        line-height: calc(28px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .text-sm {
        font-size: calc(15px * var(--mobile-scale, 1)) !important;
        line-height: calc(21px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .text-xs {
        font-size: calc(13px * var(--mobile-scale, 1)) !important;
        line-height: calc(17px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .text-\[10px\] {
        font-size: calc(11px * var(--mobile-scale, 1)) !important;
        line-height: calc(14px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .text-\[9px\] {
        font-size: calc(10px * var(--mobile-scale, 1)) !important;
        line-height: calc(13px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .text-\[8px\] {
        font-size: calc(9px * var(--mobile-scale, 1)) !important;
    }

    /* Watermark text */
    #app-projeler .text-\[140px\] {
        font-size: calc(140px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .text-8xl {
        font-size: calc(96px * var(--mobile-scale, 1)) !important;
    }

    /* Badge/chip padding */
    #app-projeler .px-5.py-1\.5 {
        padding: calc(6px * var(--mobile-scale, 1)) calc(20px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .px-4.py-1\.5 {
        padding: calc(6px * var(--mobile-scale, 1)) calc(16px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .px-2.py-1 {
        padding: calc(4px * var(--mobile-scale, 1)) calc(8px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .px-2.py-0\.5 {
        padding: calc(2px * var(--mobile-scale, 1)) calc(8px * var(--mobile-scale, 1)) !important;
    }

    #app-projeler .px-1\.5.py-0\.5 {
        padding: calc(2px * var(--mobile-scale, 1)) calc(6px * var(--mobile-scale, 1)) !important;
    }

    /* List item sağ kısım - VIEW ve ikonlar arası boşluk */
    #app-projeler .flex.flex-col.items-end.gap-1 {
        gap: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* ===== PROJECT DETAIL MODAL RESPONSIVE ===== */

    /* Modal header padding */
    #project-modal .pt-3 {
        padding-top: calc(12px * var(--mobile-scale, 1)) !important;
    }

    #project-modal .pb-6 {
        padding-bottom: calc(24px * var(--mobile-scale, 1)) !important;
    }

    #project-modal .pb-4 {
        padding-bottom: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Drag indicator */
    #project-modal .w-12.h-1\.5 {
        width: calc(48px * var(--mobile-scale, 1)) !important;
        height: calc(6px * var(--mobile-scale, 1)) !important;
    }

    /* Icon container */
    #project-modal .w-24.h-24 {
        width: calc(96px * var(--mobile-scale, 1)) !important;
        height: calc(96px * var(--mobile-scale, 1)) !important;
    }

    #project-modal .rounded-\[22px\] {
        border-radius: calc(22px * var(--mobile-scale, 1)) !important;
    }

    /* Icon text size */
    #project-modal .text-5xl {
        font-size: calc(48px * var(--mobile-scale, 1)) !important;
        line-height: 1 !important;
    }

    #project-modal .mb-4 {
        margin-bottom: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Title */
    #project-modal .text-2xl {
        font-size: calc(25px * var(--mobile-scale, 1)) !important;
        line-height: calc(30px * var(--mobile-scale, 1)) !important;
    }

    #project-modal .mb-1 {
        margin-bottom: calc(4px * var(--mobile-scale, 1)) !important;
    }

    /* Subtitle */
    #project-modal .text-white\/80.text-sm {
        font-size: calc(15px * var(--mobile-scale, 1)) !important;
        line-height: calc(20px * var(--mobile-scale, 1)) !important;
    }

    #project-modal .mb-2 {
        margin-bottom: calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* Platform badges */
    #project-modal .px-3.py-1 {
        padding: calc(4px * var(--mobile-scale, 1)) calc(12px * var(--mobile-scale, 1)) !important;
    }

    #project-modal .text-\[10px\] {
        font-size: calc(11px * var(--mobile-scale, 1)) !important;
        line-height: calc(14px * var(--mobile-scale, 1)) !important;
    }

    /* Badges gap */
    #project-modal .gap-2 {
        gap: calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* Action buttons */
    #project-modal .px-4.py-2\.5 {
        padding: calc(10px * var(--mobile-scale, 1)) calc(16px * var(--mobile-scale, 1)) !important;
        white-space: nowrap !important;
    }

    /* NOT AVAILABLE button */
    #project-modal .px-6.py-2\.5 {
        padding: calc(10px * var(--mobile-scale, 1)) calc(24px * var(--mobile-scale, 1)) !important;
    }

    #project-modal .min-w-\[120px\] {
        min-width: calc(120px * var(--mobile-scale, 1)) !important;
    }

    #project-modal .rounded-xl {
        border-radius: calc(12px * var(--mobile-scale, 1)) !important;
    }

    #project-modal .text-xs {
        font-size: calc(13px * var(--mobile-scale, 1)) !important;
        line-height: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #project-modal .w-4.h-4 {
        width: calc(16px * var(--mobile-scale, 1)) !important;
        height: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #project-modal .gap-3 {
        gap: calc(12px * var(--mobile-scale, 1)) !important;
    }

    #project-modal .max-w-\[280px\] {
        max-width: calc(280px * var(--mobile-scale, 1)) !important;
    }

    /* Watermark */
    #project-modal .text-\[140px\] {
        font-size: calc(140px * var(--mobile-scale, 1)) !important;
    }

    /* Role/Period grid */
    #project-modal .py-6 {
        padding-top: calc(24px * var(--mobile-scale, 1)) !important;
        padding-bottom: calc(24px * var(--mobile-scale, 1)) !important;
    }

    #project-modal .px-6 {
        padding-left: calc(24px * var(--mobile-scale, 1)) !important;
        padding-right: calc(24px * var(--mobile-scale, 1)) !important;
    }

    #project-modal .gap-4 {
        gap: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Role/Period labels */
    #project-modal .text-gray-400.text-\[10px\] {
        font-size: calc(11px * var(--mobile-scale, 1)) !important;
        line-height: calc(14px * var(--mobile-scale, 1)) !important;
    }

    /* Role/Period values */
    #project-modal .text-sm.font-semibold {
        font-size: calc(15px * var(--mobile-scale, 1)) !important;
        line-height: calc(20px * var(--mobile-scale, 1)) !important;
    }

    /* About section title */
    #project-modal .text-lg {
        font-size: calc(19px * var(--mobile-scale, 1)) !important;
        line-height: calc(24px * var(--mobile-scale, 1)) !important;
    }

    #project-modal .mb-3 {
        margin-bottom: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* About description */
    #project-modal .text-gray-600.text-sm {
        font-size: calc(15px * var(--mobile-scale, 1)) !important;
        line-height: calc(24px * var(--mobile-scale, 1)) !important;
    }

    /* Note text */
    #project-modal .text-gray-400.text-xs {
        font-size: calc(13px * var(--mobile-scale, 1)) !important;
        line-height: calc(18px * var(--mobile-scale, 1)) !important;
    }

    #project-modal .mt-2 {
        margin-top: calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* Technologies title */
    #project-modal .text-sm.font-bold {
        font-size: calc(15px * var(--mobile-scale, 1)) !important;
        line-height: calc(20px * var(--mobile-scale, 1)) !important;
    }

    #project-modal .mt-6 {
        margin-top: calc(24px * var(--mobile-scale, 1)) !important;
    }

    /* Tech badges */
    #project-modal .px-2\.5.py-1 {
        padding: calc(4px * var(--mobile-scale, 1)) calc(10px * var(--mobile-scale, 1)) !important;
    }

    #project-modal .text-\[11px\] {
        font-size: calc(12px * var(--mobile-scale, 1)) !important;
        line-height: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Close button */
    #project-modal .top-4.right-4 {
        top: calc(16px * var(--mobile-scale, 1)) !important;
        right: calc(16px * var(--mobile-scale, 1)) !important;
    }

    #project-modal .p-2 {
        padding: calc(8px * var(--mobile-scale, 1)) !important;
    }

    #project-modal .w-5.h-5 {
        width: calc(20px * var(--mobile-scale, 1)) !important;
        height: calc(20px * var(--mobile-scale, 1)) !important;
    }

    /* Modal rounded corners */
    #project-modal .rounded-t-\[32px\] {
        border-top-left-radius: calc(32px * var(--mobile-scale, 1)) !important;
        border-top-right-radius: calc(32px * var(--mobile-scale, 1)) !important;
    }

    /* Bottom padding */
    #project-modal .pb-10 {
        padding-bottom: calc(40px * var(--mobile-scale, 1)) !important;
    }

    /* ===== TERMINAL PAGE RESPONSIVE ===== */

    /* Hacker ticker container */
    [data-title="apps.terminal"] .hacker-ticker-container {
        padding-top: calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* Terminal header (second child after ticker) */
    [data-title="apps.terminal"]>div:nth-child(2) {
        padding-left: calc(16px * var(--mobile-scale, 1)) !important;
        padding-right: calc(16px * var(--mobile-scale, 1)) !important;
        padding-top: calc(8px * var(--mobile-scale, 1)) !important;
        padding-bottom: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Back button text */
    [data-title="apps.terminal"] .nav-back {
        font-size: calc(15px * var(--mobile-scale, 1)) !important;
    }

    /* Back button icon */
    [data-title="apps.terminal"] .nav-back svg {
        width: calc(20px * var(--mobile-scale, 1)) !important;
        height: calc(20px * var(--mobile-scale, 1)) !important;
        margin-right: calc(4px * var(--mobile-scale, 1)) !important;
    }

    /* Traffic lights */
    [data-title="apps.terminal"] .w-3.h-3 {
        width: calc(12px * var(--mobile-scale, 1)) !important;
        height: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Traffic lights gap */
    [data-title="apps.terminal"] .gap-2 {
        gap: calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* ClBash text */
    [data-title="apps.terminal"] .text-xs.font-mono {
        font-size: calc(13px * var(--mobile-scale, 1)) !important;
    }

    /* Terminal output area */
    [data-title="apps.terminal"] main#terminal-output {
        padding: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* ASCII art */
    [data-title="apps.terminal"] pre.text-cyan-400 {
        font-size: calc(10px * var(--mobile-scale, 1)) !important;
        margin-bottom: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Terminal text-sm elements */
    [data-title="apps.terminal"] .text-sm {
        font-size: calc(15px * var(--mobile-scale, 1)) !important;
        line-height: calc(22px * var(--mobile-scale, 1)) !important;
    }

    /* Welcome text margin */
    [data-title="apps.terminal"] .mb-2 {
        margin-bottom: calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* Help hint margin */
    [data-title="apps.terminal"] .mb-4 {
        margin-bottom: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Input container area */
    [data-title="apps.terminal"]>div:nth-child(3) {
        padding: calc(16px * var(--mobile-scale, 1)) !important;
    }

    /* Input box */
    [data-title="apps.terminal"] .rounded-lg.px-3.py-2 {
        padding: calc(8px * var(--mobile-scale, 1)) calc(12px * var(--mobile-scale, 1)) !important;
        border-radius: calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* Submit button icon */
    [data-title="apps.terminal"] #terminal-submit svg {
        width: calc(20px * var(--mobile-scale, 1)) !important;
        height: calc(20px * var(--mobile-scale, 1)) !important;
    }

    /* Quick commands container */
    [data-title="apps.terminal"] .flex.flex-wrap.gap-2.mt-3 {
        gap: calc(8px * var(--mobile-scale, 1)) !important;
        margin-top: calc(12px * var(--mobile-scale, 1)) !important;
    }

    /* Quick command buttons */
    [data-title="apps.terminal"] .quick-cmd {
        padding: calc(6px * var(--mobile-scale, 1)) calc(12px * var(--mobile-scale, 1)) !important;
        font-size: calc(13px * var(--mobile-scale, 1)) !important;
        border-radius: calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* Home indicator area */
    [data-title="apps.terminal"] .home-indicator-area {
        height: calc(32px * var(--mobile-scale, 1)) !important;
        padding-bottom: calc(8px * var(--mobile-scale, 1)) !important;
    }

    /* Home indicator bar */
    [data-title="apps.terminal"] .home-indicator {
        width: calc(144px * var(--mobile-scale, 1)) !important;
        height: calc(6px * var(--mobile-scale, 1)) !important;
    }
}